Man scratching his head next to the words WTF WCAG Technique Failure Bad Alt Text

WTF: WCAG Technique Fail – Bad Alt Text

ByRenee Dunn Reading Time: 3 minutes

The WTF: WCAG Technique Failure article series highlights real-world examples of failures for specific WCAG criteria.  To the extent possible, I’ve tried to protect the identity of the website. 

Each WCAG criterion includes detailed requirements for content to successfully meet the criterion.  There may also be specific examples and scenarios of content that fails the criterion.   In this article, we’ll look at three specific failures for WCAG 1.1.1 Non-Text Content where alt text and the ALT attribute are used incorrectly.    

WCAG 1.1.1 Non-Text Content

The goal of this criterion is to provide text-based alternatives to non-text content that “serves the equivalent purpose” so visually impaired users can access the content.  For the purpose of this article, the non-text content in question are all images.  Success technique H37 requires short alt text as the text alternative.  Images that are purely decorative should not have alt text, so screen readers will ignore them, but an empty ALT attribute should still be present on the image tag.     

WCAG Failures

Missing alt text is one of the most common WCAG failures I’ve encountered.  However, when viewing a directory-style website recently, I found three distinct types of failures of WCAG 1.1.1 having to do with other misuses of alt text and the ALT attribute.   

Text Alternatives That Are Not Alternatives

WCAG failure F30 covers instances where the ALT attribute contains placeholder or non-meaningful text, which does not provide a true text alternative.  In the code below, the alt text is simply “image”. 

<a href="https://*****.com/"> <img class="lazy loaded" src="https://*****.com/wp-content/uploads/2021/11/*****-03-e1638226598111.png" data-src="https://*****.com/wp-content/uploads/2021/11/*****-03-e1638226598111.png" alt="image" data-was-processed="true"> </a>

This image is the logo for the website, which includes the website name.  Since the logo is linked to the homepage, the alt text in this instance acts as the link text.  The alt text should be something like “[site name] homepage”.

Missing ALT Attribute

WCAG failure F38 covers the lack of an ALT attribute on the image tag.  When images have an ALT attribute that is empty, screen readers will ignore the image, but they will not ignore images that are missing the attribute altogether.  In the code example below, an image is used as the content of a link and the image does not have an ALT attribute.

<a href="https://*****.com/wineries/horton-vineyards/"> <noscript><img class="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20521%20634'%3E%3C/svg%3E" data-src='https://*****.com/wp-content/uploads/2021/11/*****-favicon-1.png' /></noscript><img class=" ls-is-cached lazyloaded" src="https://*****.com/wp-content/uploads/2021/11/*****-favicon-1.png" data-src="https://*****.com/wp-content/uploads/2021/11/*****-favicon-1.png"> </a>

Again, since this image is the contents of a link, the ALT attribute serves as the link text.  However, the image itself is otherwise only decorative.  In this case, the alt text should indicate the name of the page to which this link points. 

Providing Alt Text for Decorative Images

WCAG failure F39 covers instances when alt text is provided for images that are purely decorative.  In the code below, the alt text “whiteMapMarkerFill” has been provided for an icon image. 

<p class="view-on-map"> <img class="icon icons8-whiteMapMarkerFill lazy loaded" src="data:image/png;base64,*****" alt="whiteMapMarkerFill" data-was-processed="true"> <a class="md-trigger mobilelink all-list-map" data-modal="modal-listing">View on map</a></p>

Since this icon is immediately followed by the text “View on Map”, there is no need for this icon to be announced to screen readers and the ALT attribute should be left blank. 

Conclusion

These failures demonstrate the need for manual accessibility testing. Automated tools may catch the missing ALT attribute but they won’t catch the other two failures.