Image alternative text (also referred to as alt text or alt tags) plays an essential role in website accessibility. In fact, the Web Content Accessibility Guidelines (WCAG) requires “text alternatives to non-text content" in its very first success criterion.
Image alt tags help you fulfill this requirement, and if you’ve read about digital accessibility, you probably understand the importance of accurate, descriptive alt text.
If not, here’s the basic idea: When people cannot perceive media visually, the alt text explains the image’s purpose and function. Screen readers (software that outputs text as audio or braille) and other assistive technologies can interpret the alt text and present it to the user. Alt text also benefits search engine optimization (SEO) and can help visual users understand content when images fail to load.
However, some images don’t require alternative text. If you’re using elements purely for decoration, you may actually hurt accessibility by writing an alt tag — but you still need to include an empty (or null) alt tag.
In other words, you must include the alt attribute when using the HTML <img> element, even if you’re not providing a text description of the element. This is a common accessibility mistake, and if you don’t understand how screen readers present content, it’s an easy issue to miss.
The Difference Between a Missing alt Tag and a Null alt Tag
So, why can’t you simply omit the <alt> attribute?
A null attribute tells screen readers and other assistive technologies that you’re intentionally including an image that does not need alt text. You’re sending a signal that the AT can safely ignore the image — the user doesn’t need to know that the image exists in order to understand your content.
Here’s an example of a null image alt attribute for a decorative image:
<img src="/decorativeimage.gif" alt="">
When a screen reader accesses this image, it will skip it — it won’t announce the image to the user.
However, without a null attribute, screen readers may announce the presence of the image and warn the user that the image doesn’t contain an appropriate description. The user will be forced to guess whether the image is meaningless.
By including a null alt attribute, you avoid overloading the user with unnecessary information. You also provide them with a better browsing experience, particularly if you use decorative images throughout your website.
Related: 8 Common Image Alt Text Mistakes to Stop Making
Using Null alt Attributes
Null attributes aren’t especially complicated. Use them when an image fits into one of these categories:
-
The image is purely intended for decoration.
-
The image is invisible (it isn’t presented to visual-first users).
-
The image is part of your website’s visual formatting.
-
The image’s content is repeated in the text.
Of course, deciding whether an image is purely decorative requires some human judgment. For more guidance, read: 3 Questions to Help Decide If an Image Doesn't Need Alt Text.
What about hiding images with WAI-ARIA?
You may also decide to use the aria-hidden=”true" attribute to hide content from the accessibility API. This can improve the experiences of assistive technology users in some cases — but remember, WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is powerful stuff. When using ARIA, test your markup carefully.
And while semantic HTML is widely supported by all screen readers and assistive software, ARIA support varies. Even if you use aria-hidden=”true,” you should still include a null alt attribute.
Related: What WAI-ARIA “Hidden" Warnings Mean For Your Website
Review your website’s image alt tags regularly
The bottom line: Every image on your website that uses the <img> HTML element needs an alt tag, even if that attribute is empty (null). Regularly audit your content to make sure that your images meet these rules:
-
Every image that uses the <img> element has an alt tag.
-
Null alt tags are assigned appropriately.
-
Where possible, you’ve used CSS (Cascading Style Sheets) background images to provide decorative images instead of the <img> element.
-
When alt tags contain text, that text is descriptive, accurate, and concise.
Automated tests can be useful for identifying alt text issues. The Bureau of Internet Accessibility provides a free, confidential WCAG 2.1 Level A/AA website analysis to help you identify (and fix) common accessibility barriers.
