3 Alt Text Pitfalls to Avoid


""

Two weeks ago I released a comic strip depicting a student unable to answer a test question because the question was missing critical information. The reason? Missing alternative text.


Alternative text, often shortened to “alt text”, is text attached to non-text elements on a page so that a screen reader can supply equivalent information to a non-sighted user. When an image is missing alt text, a student navigating the page with a screen reader never receives the content of the image.


In other words, when you use an image in a non-decorative way and fail to include alt text, there is a giant, gaping hole in your content. That’s a user experience we want to avoid.


But not all alt text is equal. Adding some words quickly without thinking through the required level of detail and the context in which the user will encounter the image also leads to a lousy user experience. Let’s explore 3 pitfalls we want to avoid when building online course materials.


Pitfall #1: Missing Alt Text

A screen reader can only read the information that is provided to it. That makes it incumbent on us as content creators to supply the necessary alt text. This is super important, yet according to The WebAIM Million, an annual analysis of the accessibility of the top 1,000,000 home pages, 26% of all home page images were missing alternative text as of February 2021.


Whoa.


Sure, some of those images were probably decorative, but others contained product descriptions, explanatory diagrams, promotional offers, and other valuable information that a user navigating the site with a screen reader never received.


The Web Content Accessibility Guidelines (WCAG) regarding alt text require that, except for a few exceptions, “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.” In other words, we need to associate each image with a description that conveys in words the content of the image.