You’ve written detailed captions for the images on your website. Do you also need to write HTML alternative text (also called alt text or image alt tags)?
Like many digital accessibility issues, this requires some human judgment. The quick answer: Not necessarily, provided that the caption includes all of the relevant information from the image. However, you still need to make sure that your caption fulfills the Web Content Accessibility Guidelines (WCAG) Success Criterion (SC) 1.1.1, “Non-text Content.”
WCAG 2.1 SC 1.1.1 doesn’t explicitly require the img alt tag. It requires a text alternative for non-text content and specifies that the alternative must serve an equivalent purpose.
In other words, if visual content isn’t perceivable for any reason (for example, the image fails to load), the text alternative should provide the same essential information as the missing content. Captions can meet this requirement.
Here’s an overview of how captions and alt text can work together to improve experiences for internet users with disabilities — and how you can determine whether blank (or null) alt text is appropriate.
Understanding The Difference Between Captions and Alternative Text
In web design, image alt text usually refers to an HTML tag that appears in place of an image if the image fails to load. In other situations, the alt text is not visible on the web page — but it may be perceivable to people who use screen readers (software that converts text to audio or braille) and other assistive technologies.
Captions are also identified with HTML via the figcaption attribute. However, captions are visible on the page.
In some cases, captions and alt text may be redundant
If you’re using an image that has a caption, it may not need alt text if the caption contains all of the relevant visual information. For example, let’s say you publish an image of an apple with alt text that reads “Red apple.” The caption reads: “A red apple from our family orchard.”
A screen reader user would hear both of these descriptions, which would be redundant. In this case, you can leave out the alt text while meeting WCAG SC 1.1.1. You could do this by including a null alt attribute, which tells screen readers that the image can be ignored.
<figure>
<img src="/media/an-apple.jpg"
alt="">
<figcaption>A red apple from our family orchard.</figcaption>
</figure>
Null alt attributes should also be used for decorative images. For more guidance, read: How Do I Know If an Image Needs Alt Text?
When in doubt, include alt text — even when you have a descriptive caption.
While captions sometimes meet WCAG’s requirements for a “text alternative to non-text content,” the best practice is to include both the alt text and the caption — unless you’ve got a very good reason to do otherwise.
Why? For starters, most captions contain other details (such as the source of the image, copyright information, or context about how the image relates to the rest of the content). You don’t want to force screen reader users to listen to a paragraph of text to understand the purpose of the image.
And while you might occasionally find an example of a caption that provides all of the same information as the alt text — and nothing else — consistency is extremely important for digital accessibility. If all of your website’s images contain captions, but only some of those captions serve as text alternatives, the safest option is to include alt text for every image.
Related: 8 Common Image Alt Text Mistakes to Stop Making
Accurate alt text is fundamental for digital accessibility
Captions may technically qualify as a text alternative, but that doesn’t mean that they’re the best tool for the job. If you use captions to provide a text alternative for images, you may run into several issues:
-
The figcaption attribute was introduced in HTML5, and some older user agents may not support it. The alt tag is widely supported, so it’s a more robust option.
-
Writing image alt text has search engine optimization (SEO) benefits.
-
Captions often contain much more text than image alt tags, and some of that text may not be relevant to the image.
To create a truly accessible website, you’ll need to consider how your decisions affect the experiences of real-life users. This is especially important for issues that require human judgment (such as text alternatives, subheadings, and page titles).
If you need guidance, we’re here to help. Send us a message to start building your strategy to achieve, maintain, and provide digital compliance.
