Examples of Text Alternatives to Non-Text Content

Text alternatives play a crucial role in digital accessibility. In fact, the Web Content Accessibility Guidelines (WCAG) addresses alternative text in its very first guideline, “Non-Text Content.” This is a Level A success criterion, which means that content that fails the guideline cannot be considered reasonably accessible.

But what is a text alternative, exactly, and how can you provide effective alternatives that are truly useful for people with disabilities? 

Why are text alternatives important for accessibility?

When you’re creating content for online audiences, you’re speaking to an extremely large audience. About 25% of U.S. adults live with some form of disability, and many conditions can affect sensory perception. When you provide alternatives for sensory-based media, text can be converted into different types of output to suit the user’s abilities.

For example, many people with vision disabilities use screen readers (software that converts text to audio or braille). If your website contains text alternatives for visual media, screen reader users will be able to enjoy your content. Likewise, people with hearing disabilities may prefer to read content rather than listen to it, and if someone doesn’t speak your website’s native language, they can use translation tools to convert text into their primary language. 

Providing transcripts accommodates a wide variety of users. As a website owner, developer, or designer, it’s your responsibility to provide those accommodations.

Related: The 5 Most Common Website Accessibility Issues (And How To Fix Them)

Examples of Text Alternatives for Accessibility

Fortunately, writing alternative text is fairly straightforward. If any element on your website relies on the user’s vision or hearing, it needs a text alternative, with very limited exceptions (we’ll discuss those exceptions in a moment). 

Examples of text alternatives for non-text content include:

• Image alternative text (also known simply as alt text or image alt tags) are included with the HTML markup of an image. Good alt text provides a simple, concise description of the purpose and function of the image. 
• Video captions and transcripts are text alternatives that enable users to understand content without relying on sound.
• Text alternatives for charts and graphs can make data more accessible for people who use screen readers and other assistive technologies.
• Icons and thumbnail photos that act as hyperlinks should have alternative text that explains what the user can expect when clicking on the hyperlink.

With every type of text alternative, accuracy is important. Transcripts and captions should contain all important speech, sound effects, and musical cues from your media. Image alt text should include a clear description of the image in question without unnecessary details.

Related: 8 Common Image Alt Text Mistakes to Stop Making

Does every visual web element need a text alternative?

If your website uses images that don’t provide context or meaning, those images don’t need alternative text. For example, many websites use dividers to accomplish a certain visual aesthetic.

Since dividers don’t change the context of the web page, they don’t need alt text — but you’ll need to use the null alt attribute to instruct assistive technologies to ignore these elements. Using the null alt attribute is not the same as having no alt attribute. 

Here’s how to avoid other common mistakes when providing text alternatives for non-text content:

• Make sure users can find your text alternatives. For example, if you provide a transcript for a video or podcast, place a prominent link to the transcript above or below your media. 
• Use caution when automatically generating alt text. If you’re publishing videos, for example, automated captions are an excellent starting point. However, they’re only about 70% accurate. 
• Don’t forget to provide text alternatives when posting on Facebook, Twitter, and other social media platforms.
• Consider the user experience. For images, succinct alternative text is usually better than long-winded descriptions. 
• Controls and input mechanisms should have accessible names that clearly describe their purpose.
• When using CAPTCHA tests, provide information describing the purpose of the test, along with alternative mechanisms for people who cannot solve the CAPTCHA visually. We discourage the use of visual CAPTCHAs, as accessible alternatives are available that provide a much better user experience.

Finally, test your text alternatives before publishing your content. Make sure that they’re easy to find, useful, and accurate enough to provide users who have disabilities with an equivalent experience.

The Bureau of Internet Accessibility’s free website analysis can identify instances of missing text alternatives, along with other common accessibility barriers. However, remember that human judgment is key: No automated tests can judge the accuracy of your content, so you’ll need to manually review your work for the best possible results. 

For more guidance, view our free digital accessibility resources or send us a message to connect with a subject matter expert.