Image Accessibility Problem

[j0hnwat3rman]

Hello,

WCAG guidelines state that "images that do not convey content, are decorative, or contain content that is already conveyed in text should be given an empty alternative text (alt="").

Unfortunately, this doesn’t seem to be what’s happening with Pro, which is problematic for screen readers because they will do not skip over images unless the alt value is null, which looks like (alt=""). Not having an alt tag for decorative images is not sufficient.

Can you help figure out a way to ensure images I add that do not have defined text alt text show alt="" and not something like alt="image" or no alt tag at all?

[ruenel]

Hey @j0hnwat3rman,

Thanks for writing in! When you add an Image element and have supplied the image source, please do not forget to add an alternative text in the option field that has been provided in the Image element settings to avoid the alt="" on the frontend.

Best Regards,
RueNel

[j0hnwat3rman]

Hey @ruenel -

I appreciate the quick response, but you’ve misunderstood the problem. There is no issue with adding alt text.

The problem is the that WCAG requires images that are purely decorative have a null alt value alt="". As far as I can tell, this isn’t Pro’s default behavior, which is a problem because we’re forced to give decorative images an alt tag. If I leave that alt tag empty, I WANT the image’s alt tag to look like alt="", but that’s not what’s happening.

When left empty there is no alt tag at all, which is not how it should work and it results in WCAG compliance problems and a confusing experience for folks using screen readers.

[tristup]

Hi @j0hnwat3rman,

It seems that you are using the Classic Image element, I would suggest you use the image element where if you left empty the Alt Text attribute in the image element, it will add the Image as the default alt value to the image element.

If you are using the Image element, but still you are facing the problem, there might be some other reason behind your problem. I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1. Theme Related Issue
2. Plugin Conflict
3. Theme Update related issue
4. Child Theme Related issue ** if you activated it
5. CSS/JS Customization
6. Disabling Cache
7. Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[j0hnwat3rman]

@tristup - I do appreciate the response, however, you’re still not understanding the problem. I am also not using the classic image element, and this is not a plugin conflict.

As noted above, Images that are decorative should have a null alt value, which looks like alt="". Setting the default alt-tag to be alt="Image" does not follow WCAG guidelines and is problematic for people who might be using a screen reader. Again, decorative images should show alt="".

Again, as specifically as I can say it, the alt-tag should not default to alt="Image" when the image used is decorative. It has to be there but the value needs to be null. It should look like alt="".

I saw an old thread that provided a way to change the default alt tag from image to something else. I tried modifying it but it results in nothing showing up:

add_filter( 'cs_fallback_alt_text', function($text) {
  return '';
}, 10);

[ruenel]

Hello @j0hnwat3rman,

When the Alt text is empty, the fallback Alt text will be displayed which is the “Image” by default. If the fallback Alt text is empty, the Alt attribute will not be displayed at all. You can update this code and try this:

add_filter( 'cs_fallback_alt_text', function($text) {
  return ' ';
}, 50);

The Image element will have the ALT attribute in the frontend because there is an empty space as the fallback Alt text. As soon as you make fallback Alt text null or no value or character, the Alt will not be displayed.

I will add your concern to our issue tracker.

Best Regards.

[j0hnwat3rman]

Thanks, @ruenel!

The update to the function seems to have done the trick. I also appreciate you guys adding it to the list of issues tracked.

[ruenel]

You are most welcome, @j0hnwat3rman.