When a person can’t see an image on the screen – whether it’s because they have Visual Disabilities or whether it’s because the image didn’t load – and the image is important to understanding the page’s message, we provide alternative text that displays instead.
- Ask yourself, “If I couldn’t use an image, what text would I put in its place?” to help decide what makes the most sense.
- Use the Alt Decision Tree provided by the W3C as a guide to what kind of alt text to provide.
- Write content that is accurate and equivalent in presenting the same content and function of the image. For example, if the purpose of an image was to compare two menus, you would want to identify the difference between the two menus, not say “two menus”.
- Be succinct. Use as few words as necessary.
- The screen reader JAWS will pause after 150 characters and the user will need to press the down arrow key to continue to hear the next 150 characters.
- Anything larger than about 150 characters must be provided in a separate long description. See Providing a location for a long description for information about working with your UX Designer to implement a long description.
altattribute is still required even if a long description is available, but it can reference the long description. For example, the
altattribute on a pie chart may be “Pie chart of types of trees. A full description is in the caption following the chart.”
- If the color of the image (or other visual indicator) helps to explain the image, it is OK to mention the color in the alt text. Use of a screen reader doesn’t mean that the user has absolutely no vision, or that they’re offended by the existence of color.
- End with a period. It causes the screen reader to pause, which creates a more pleasant experience for the user.
- If the alt text is for an
<input type=”image”>(image-based button), be sure to describe what the button does, not how the button looks. “Submit the form.” would be good alt text. “A red oval with white text.” would be bad alt text.
- If you’re labeling an image map both the
<map>require meaningful alt text.
- Include the words “image of…”, “graphic of…”, “icon…”, “logo for…” etc. as part of the alt text unless it is critically important to differentiate between, say, an illustration and a photograph.
- Repeat content that precedes, follows, or refers to the image. See Writing for Screen Readers: Don’t Repeat Yourself for more information.
- Describe purely descriptive images. A stock image of two hands shaking may be visually compelling but it’s noise to someone using a screen reader.
- Add content or context to the alt text that’s not in the image. A stock image of two hands shaking should not have alt text of “we guarantee our professional services”, for example, because that’s not conveyed in the image.
- Add meta keywords or irrelevant words you’re hoping will raise the page’s rank in Google or other search engines.
titleattribute text to the image as well. This causes some screen readers to read both the alt text and the title text.
- Provide alt text for repeated images in feeds, such as the profile images of users.
Considerations for inline SVGs
We’re going to get a little code-heavy here a moment.
The standard way to create an inline SVG is to put the SVG’s content directly in the HTML. (SVGs are XML files.) So in the HTML file you’ll see something like
<svg aria-labelledby="titleid descid"> <title id="titleid">Chicken</title> <desc id="descid">A chicken is a feathered dinosaur that lives in barnyards all over the world.</desc> <!-- coordinates for drawing chicken --> </svg>
<title> element should be in every SVG, although most SVG drawing applications output it as the name of the layer or other useless text until we edit it.
<desc> (description) element is optional, and only accessible to screen readers and other assistive technology. (Even then some browsers require the
aria-labelledby attribute to list the IDs of the title and description to read it out.)
There are much better ways to provide a long description for a complex SVG than using the
<desc> element. See Providing a location for a long description for some suggestions.
If you are going to use the method described above, keep in mind that the text of the title and description will be combined as the alt text, so the combined text must be 150 characters or less to behave well in screen readers.
- If an image is only text, using the text as the alt text is generally sufficient. This should be extremely rare since embedding text in an image is itself an accessibility failure. See Avoid text in images.
- Quick Tips for Writing Meaningful Alt Text Webinar – Q&A and resources by E. Foley on Level Access provides guidance for complicated scenarios such as animated images.
- Social Security Administration Guide: Alternative Text for Images (pdf) provides in-depth guidance for everything from links and icons to charts and graphs, as well as a set of most-frequently seen mistakes and issues.
- Alternative Text by WebAIM
- How to Design Great Alt Text: An Introduction by Deque
- Alt-texts: The Ultimate Guide by Daniel Göransson on Axess Lab