Adding Alt tags for Accessibility – Header Image

Home Forums Icelander Adding Alt tags for Accessibility – Header Image

Viewing 10 posts - 1 through 10 (of 12 total)
  • Author
    Posts
  • #18452

    Zephinilium
    Participant

    Adding Alt tags for Accessibility – Header Image

    Resolved

    Hello – How can I add alt tags to a header image and others? Someone pointed out the limited accessibility of the images on the home page – for example since the header image contains text the user needs (regarding the WelcomeVoter kiosk, as well as the button leading to the kiosk site – though perhaps another solution will be needed for the button).

    Thanks

    #18453

    Oliver Juhas
    Keymaster

    Hi Eric,

    I can see you have built the homepage using Beaver Builder page builder. The page builder’s “Photo” module takes the image alt attribute from the media library. Actually, you should set the alt text for all images in your WordPress Media Library like so:

    Just to let you know, if you are using the image as a row/column background, you don’t have to set up the alt attribute for those. It is actually impossible to display in that case.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18454

    Zephinilium
    Participant

    Oliver – 

    I see, yes that worked (I had assumed I’d added the header via the theme, sorry).

    I just added a “click here to go to the kiosk site” to the alt tag (since the whole image is clickable) for lack of a better idea. Let me know if you’ve seen other ways to do it.

    Thanks,
    Eric

    #18455

    Oliver Juhas
    Keymaster

    Hi Eric,

    I would actually do it a bit differently:

    1. I would use an image (without any text) as a row background and set the row top and bottom padding to, let’s say, 100px.
    2. Then I would add a text module with the appropriate text into a column within that row, and set the column background to semi-transparent grey/black, and column text color to white.
    3. I would insert the button into same column, but if you prefer to have the button outside of the semi-transparent background with text, simply add another column to the row and add the button in there.

    If you provide an editor/admin access to your website, I can create such row layout for you so you can play with it.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18456

    Oliver Juhas
    Keymaster

    Also, the theme actually outputs images using native WordPress functions. So, all alt attributes of the image tag will work the same. Once you set it in media library, it should work everywhere.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18457

    Zephinilium
    Participant

    This is a private reply!

    This reply has been marked as private.
    #18461

    Oliver Juhas
    Keymaster

    Hi Eric,

    Thanks for the access, I’ve created a sample “_BB home intro” page for you with the row layout I’ve suggested. You can simply save the row as template and reuse it anywhere you like.

    I have also added a CSS class of special-intro-text on the semi-transparent column containing the text, so you can further more apply additional custom CSS styles such as:

    .special-intro-text {
    	text-shadow: 0 0.19em 1em rgba(0,0,0,.8);
    }
    
    .special-intro-text sup {
    	font-size: .62em;
    }

    You can now remove my access account.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18476

    Zephinilium
    Participant

    Hi Oliver –

    Thanks for setting that up, that’s great.

    I tried to duplicate the setup on my own test page but couldn’t figure out where the heck you put the CSS that affects the text background (nor text color)?

    • This reply was modified 6 days, 18 hours ago by  Oliver Juhas. Reason: Making the reply public and deleting sensitive information, no longer needed
    #18480

    Oliver Juhas
    Keymaster

    Hi Eric,

    I haven’t used any custom CSS on your website, for that layout. All is done with Beaver Builder native options.

    The semi-transparent dark background and text color are set up as column colors. Please edit your column settings (and/or row settings) to achieve the same effect.

    However, there is an easier way for you to replicate the layout anywhere on your website. Simply save the row for reuse and add it to any page builder layout you want.

    If you are new to Beaver Builder, I suggest checking out the resources provided in theme documentation.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18484

    Zephinilium
    Participant

    Hi Oliver –

    Yes I have looked over and over again in the Row Settings for the colors, but they appear to be at default, and changing them doesn’t affect anything (see screenshot).

    I want to understand this so I don’t have to depend on anyone to set things up and not have to use templates you made.

    Where are the colors actually located? Can you be specific so I can reproduce it please. I’ve looked at the BB docs to no avail.

    Thanks!
    Eric

    • This reply was modified 6 days, 6 hours ago by  Zephinilium.
Viewing 10 posts - 1 through 10 (of 12 total)

You must be logged in to reply to this topic.