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

WTF: WCAG Technique Failure – Bad Alt Text

ByRenee Dunn Updated on Reading Time: 4 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 the WCAG 1.1.1. Non-Text Content 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 alt text and ALT attribute failures.   

Text Alternatives That Are Not Alternatives

WCAG failure F30 covers the use of 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 NVDA, if an image is missing an ALT attribute, the screen reader will announce the image file name followed by “unlabeled graphic link”.  This text does not tell a screen reader user the purpose of the link or what page it will take them to.

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.  In this instance, if this image were not linked, I would consider this a purely decorative image that should have an empty ALT attribute so it is ignored by screen readers.  One solution in this case is to remove the link and just have the empty alt attribute.  For this to pass WCAG as a proper link with accessible text, the alt text should indicate the name of the page to which the link points.  Alternatively, an empty alt attribute can be added to the image if an aria-label is added to the link tag to provide the accessible link text. 

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 specific errors demonstrate the need for both automated and manual testing when evaluating WCAG conformance.  For example, on this page, an automated testing tool caught the missing ALT attributes and missing ALT text. It even caught the non-meaningful alt text used on the logo because it contained the word “image”.   But it didn’t catch the non-meaningful alt text on the location marker or the fact that the image shouldn’t actually have alt text to start with.