Alt text issues

Home Forums Icelander Alt text issues

Viewing 10 posts - 1 through 10 (of 12 total)
  • Author
    Posts
  • #20323
    rajan
    Participant

    Alt text issues

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Dear Webman design team,

    I am trying to have the alt text tag active on the logo and banner on the home page of my clients Icelander template site:

    http://www.risingflame.org

    I have searched the documentation, other tickets and many other blogs without any result. The current alt text on the actual logo image in the gallery is:

    Rising Flame Logo: It is a phoenix facing upward towards the right. It’s wings are in the shape of flames all around it. It looks like it is about to take flight. The centre of the phoenix is red and the outer layers are dark orange and the last layer is light orange. Below the icon the words Rising Flame are written.

    However, in the html its just “Rising Flame”:

    Rising Flame

    Please let me know how I can update this and the banner on the home page so it can be read by a screen reader.

    Thanks in advance

    #20327
    Oliver Juhas
    Keymaster

    Hi rajan,

    Please note that the theme uses native WordPress functionality to display these, so it does not modify or remove alt text set for your images.

    You can set alt text for any image uploaded to your website in Media Library.

    I’ve just tested myself and it works perfectly fine for logos. WordPress falls back to site name only if you don’t set any alt text for your logo image.

    By banner, do you mean the intro section of the page (the one with “Lead. Grow. Change.” text overlay on your website)? If so, the situation is different here for WordPress. It forces site name as alt text for the image here. I’m not sure why they decided to do this, but thank you for spotting the issue, I will apply a custom fix in next theme update. Meanwhile, please use this code in your child theme‘s functions.php file to fix the intro (banner) image alt text:

    function child_theme_get_header_image_tag( $html, $header, $attr ) {
    	if ( isset( $header->attachment_id ) ) {
    		$image_alt = get_post_meta( $header->attachment_id, '_wp_attachment_image_alt', true );
    		if ( ! empty( $image_alt ) ) {
    			$attr['alt'] = $image_alt;
    			$html = '<img';
    			foreach ( $attr as $name => $value ) {
    				$html .= ' ' . $name . '="' . esc_attr( $value ) . '"';
    			}
    			$html .= ' />';
    		}
    	}
    	return $html;
    }
    add_filter( 'get_header_image_tag', 'child_theme_get_header_image_tag', 10, 3 );

    Best regards,

    Oliver Juhas
    WebMan Design

    #20330
    rajan
    Participant

    Dear Oliver,

    Thank you for your prompt and detailed response.

    Below I have attached what is coming up on mine for the logo. for some reason it is, as you pointed out, defaulting to the site title. The client would like the screen reader to read the full logo description. I have pasted the logo description in the Alt text, description and caption fields with no result.

    I am an amateur WP developer who is doing this site Probono to learn more wp skills. As such, I made the mistake of not using the Child theme. I was very happy to see with the documentation how easy and user-friendly it was to switch to the child theme and make the edits. Thanks for this, it’s excellent.

    One slight issue, the accessibility plugin (top right corner) stopped working as soon as I switched to the child theme. I’ve deleted and reinstalled the plugin but with no success. It gives me an error:
    cdn.userway.org refused to connect.
    Is there another setting I am to activate/update when switching to the Child theme?

    best,

    Rajan

    #20333
    Oliver Juhas
    Keymaster

    Hi Rajan,

    Please understand I can’t provide support for 3rd party software. Try to contact your accessibility plugin support for help with the issue.

    As for the logo alt text, please provide admin access to your website so I can check personally. It really should work from looking at WordPress code. Alternatively you can use the get_custom_logo filter hook to modify the logo output and add your own alt text (but this shouldn’t be necessary).

    Best regards,

    Oliver Juhas
    WebMan Design

    #20334
    Oliver Juhas
    Keymaster

    Actually, looking at the code of your website, I can see the logo image is cropped by WordPress. Please try to upload already cropped image as logo and skip cropping in WordPress when uploading the image as site logo. That may be the issue why it does not display correct alt text for you.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 1 year, 6 months ago by Oliver Juhas. Reason: Adding more info
    #20336
    Oliver Juhas
    Keymaster

    Or, even better, to explain, if you choose to crop the site logo image during upload to WordPress customizer, a new cropped image is added into the Media Library by WordPress. And as this new cropped image is used as logo on your website, you should actually set the alt text for this particular image in Media Library, and not your original uploaded image.

    I think this might be the real cause of the issue. So, to resolve, please check your Media Library: you should see 2 logo images there – one cropped by WordPress which is used as site logo and one original uncropped logo image where you’ve actually already set the alt text. Just copy the alt text from the original uncropped image into the cropped one.

    Important: There is a little caveat here though: you need to switch the Media Library to “list” view to see the cropped logo image and so to be able to edit it. Again, I don’t understand why WordPress choose to do this. I will log bug reports for these weird accessibility issues with WordPress as it should really be resolved in the core, not by themes/child themes.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 1 year, 6 months ago by Oliver Juhas. Reason: Adding helpful link
    #20338
    rajan
    Participant

    Dear Oliver,

    Amazing spotting that!! It is really crazy that a cropped image does not carry the alt text and even more so that to view the image you have to list view! I have no idea how you discovered it but well done! I almost never use list view so would never have seen it.

    All is working now with the logo, which is excellent. The only issue I have now is with the background image. The code you gave me worked perfectly and the alt text is now there. However, I have had two of the visually disabled staff and friends test on various browsers and 2 different screen readers and the screen readers still don’t pick up the banner image description.

    I’m wondering if theres anything in the code that can be tweeked to change this, please let me know when you can,

    best,

    Rajan

    #20339
    Oliver Juhas
    Keymaster

    Hi Rajan,

    This is actually related to the theme. The theme displays a special intro section only on homepage, where the image is treated as decorative background image for the intro section with a text overlay. So, actually the text overlay is important here and not the image on the background, the image is only decorative. On other pages the image is displayed in whole with the actual <img> HTML tag, without text overlay.

    That’s why on homepage the actual image in <img> HTML tag is hidden with display: none; CSS styles, which renders it (and its alt text) inaccessible. If you really want to make this decorative image accessible to assistive technologies, please use this custom CSS:

    .intro-special .intro-media img {
    	display: block;
    	clip: rect(1px, 1px, 1px, 1px);
    	-webkit-clip-path: inset(50%);
    	clip-path: inset(50%);
    	position: absolute !important;
    	width: 1px;
    	height: 1px;
    	line-height: 1px;
    	overflow: hidden;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20342
    rajan
    Participant

    Thank you Oliver! you’ve saved the day! This was the last element that was holding the launch up. The Rising Flame team are extremely happy and will be launching the site tomorrow,

    Thank you again for all your help and speedy replies!

    Rajan

    #20343
    Oliver Juhas
    Keymaster

    Hi Rajan,

    Glad to help. Good luck with the website! :)

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 10 posts - 1 through 10 (of 12 total)
  • You must be logged in to reply to this topic.