WTF: WCAG Technique Failure – Bad Alt Text

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 success criterion includes detailed requirements that content must meet to satisfy 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.    

What Is WCAG 1.1.1 Non-Text Content

The goal of the WCAG 1.1.1. Non-Text Content success 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 must still be present on the image tag.     

Examples of WCAG Failures for SC 1.1.1 Non-Text Content

Missing alt text is one of the most common WCAG failures.  When viewing a directory-style website recently, I found three distinct types of alt text and ALT attribute failures.   

Failure: Text Alternative That is Not a Meaningful Alternative

Alt text fails WCAG when it is placeholder or non-meaningful text, which does not provide a true text alternative. This can include using the filename or any other non-meaningful text. 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 acts as the link text.  The alt text should be something like “[site name] homepage” in order to be meaningful.

Failure: Missing ALT Attribute

An image will fail to meet WCAG when it does not have an ALT attribute on the image tag.  When images have an ALT attribute that is empty, screen readers will ignore the image. A screen reader 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 “unlabeled graphic”.  This text does not tell a screen reader user anything meaningful about the image.

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 contents of 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 can be added to the link tag to provide the accessible link text. 

Failure: Providing Alt Text for Decorative Images

Alt text will fail WCAG when it is provided for an image that is 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 limitations of automated testing and the need for 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 the automated scanning tool 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.