As far as accessibility issues go, too much alternative text (also called alt text) is less common than missing alternative text. Nevertheless, it’s possible to overuse the HTML alt attribute, particularly if you don’t understand its purpose.
The attribute should provide a text-based alternative to visual content, which helps to fulfill the very first requirement of the Web Content Accessibility Guidelines (WCAG), the international standards for digital accessibility.
Here’s the full text of that success criterion:
”All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”
That’s a simple requirement — and the HTML alt attribute is usually the best tool for fulfilling it. As we’ve discussed on this blog, appropriate use of plain old semantic HTML (POSH) is essential for accessibility.
But in some cases, the alt attribute should be empty (or null). Here’s why.
Remember the purpose of the alt attribute
The primary purpose of the attribute is to stand in for visual content when the user cannot perceive the content visually due to a disability, a slow internet connection, a broken image link, or for various other reasons.
The alt attribute is not intended to do anything else. You shouldn’t use it in a misguided effort to boost your website’s SEO (Search Engine Optimization), and you certainly shouldn’t use it for elements that already contain text.
Related: Examples of Text Alternatives to Non-Text Content
Overused alt text can impact screen reader users
Nevertheless, we’ve seen developers make this mistake. This is particularly common when using images that are intended purely for decoration. Decorative images must contain an alt attribute, but it should be empty (or null), which informs screen readers (software that converts text to audio) that the image can be safely skipped.
For example, let’s say you’re using an image as part of your website’s visual formatting. The image doesn’t do anything — it’s just a simple pattern.
If you write descriptive alt text, it might read something like this:
<img src=”/decorativeimage.gif" alt=”crossed lines over blue squares.”>
A screen reader user would hear that description announced, but it wouldn’t help them use your website or understand the content. They would likely become confused, particularly if the image appears on multiple pages.
If you omit the alt text entirely, however, most screen readers will announce “image" to tell the user that an image exists on the page. That’s also confusing.
A null attribute would tell the screen reading software to skip the image without announcing it:
<img src=”/decorativeimage.gif" alt=””>
To learn more about null alt attributes, read: Images That Don’t Need Alternative Text Still Need ALT Attributes.
Never use alt text for elements that don’t require alt text
We’ve also seen websites using alt text for elements that have nothing to do with visual presentation. For example, we recently reviewed several Texas election websites that were charged by the Department of Justice for alleged violations of the Americans with Disabilities Act (ADA).
The first website we tested included alt text for a Skip Navigation button. That button already contained text that would be announced to screen reader users — those people would hear “skip navigation" announced twice.
A better approach would be to omit the alt text entirely. In this case, the button wasn’t an image, and it contained text that clearly described its purpose.
For better web accessibility, consider your users when writing alt text
Ultimately, if you’re thinking about web accessibility, you’re on the right track. An accessible mindset will help you improve experiences for all users, and as you learn more about WCAG, you’ll avoid common barriers while finding creative ways to structure your content.
To that end, you should always think about your users when making accessibility decisions. Ask questions:
- If the image doesn’t load, does the alt text provide users with the same amount of information?
- How will the alt text sound when read aloud? Is it descriptive enough to be useful?
- Is the image purely decorative?
- Does the alt text include phrases like “picture of" or “image of" that would be redundant for screen reader users?
Learn more by downloading our free eBook: Developing the Accessibility Mindset. For help with a specific web accessibility issue, send us a message to connect with an expert.
