Alternative text (alt text) is a text alternative to non-text content — i.e., images — on the web.
- Making experiences accessible for people who use assistive devices
Screen readers will announce an image’s alt text because they cannot analyze an image’s content, function, or context. (Without alt text, the screen reader will announce the image’s filename, which is more than likely random, non-descriptive, and/or generally unfriendly.) - SEO
Search engine robots can’t analyze images. When they crawl your site, they will index the alt text for all images. - Fallbacks
If an image file does not load (due to network error or user choice) in a browser or email client, alt text will be displayed in place of the image.
Alt text is described within the value of the alt attribute on <img> elements
<img src="image.png" alt="alt text">Purely decorative images must contain blank alt text (alt="").
Generally, images that are displayed via CSS should only be decorative.
If an image is meaningful, HTML elements with a CSS background image may be made readable in the accessibility API by describing the element as an image with role="img" and adding its alt text via aria-label. These HTML elements should serve no other purpose their role attribute is accurate.
<div style="background-image: url('image.png')" role="img" aria-label="alt text">
</div>Alt text is described within the <title> tag inside an <svg> element. The <title> is then associated with the <svg> via aria-labelledby.
Additionally, inline <svg>s must have their role set with role="img".
<svg aria-labelledby="image-inline-svg" role="img">
<title id="image-inline-svg">alt text</title>
</svg>→ Read more: CSS Tricks | Accessible SVGs
Unless an accessible fallback exists, alt text is described within the aria-label attribute on <canvas> elements. If a <canvas> displays a graphic, it should be sementically set as an image with role="img".
<canvas aria-label="alt text" role="img"></canvas>→ Read more: Paul J Adam | Canvas
A grouping of non-text content that should be consumed as a single image (which could include any media, code snippets, emojis, or other content) should be semantically identified as an image with role="img".
If the image is not contextually described in the page’s copy, use aria-label to provide overall descriptive alt text for the media group.
<div role="img" aria-label="alt text">
<img src="image-1.png" alt="">
<img src="image-2.png" alt="">
</div>If the image is described elsewhere in the page, identify that location with aria-labelledby.
<div role="img" aria-labelledby="image-group">
<img src="image-1.png" alt="">
<img src="image-2.png" alt="">
<p id="image-group">
Text describing the group of images, viewable and accessible to all.
</p>
</div>→ Read more: MDN | ARIA: img role
In the spirit of providing contextual descriptions for non-text content, video and audio on the web should always include captions and/or a transcript.
Other non-text or media elements should be described by aria-label or aria-labelledby. If they are purely decorative elements, they should be should be hidden from accessibility APIs via aria-hidden="true". Elements can still be exposed to assistive technology while being programatically set as having no semantic role with role="none presentation".
→ Read more: MDN | Using the aria-hidden attribute
Alt text is described within brackets [] on image elements.
- Alt text should be able to serve as a replacement text for the image. If every image on a page was replaced by the value of its
altattribute, the meaning of the page would not change. - To write approrpriate alt text, concisely describe the image’s main points and its context within the page and its nearby text content. Why is the image there? What does it illustrates? What does it add to the text?
- Alt text shouldn’t repeat information already provided in the page’s copy.
- Alt text is not a supplement to to the image.
- Purely decorative images should not have descriptive alt text.
- Alt text should be as long as necessary to be informative, while still being as brief as possible. Aim for under 250 characters.
- If the alt text is longer than ~250 characters, consider captioning the image element or providing its context in the copy itself. Aim for clarity for all users.
- Use appropriate grammar so a screen reader annouces speach naturally.
- Use sentence-style capitalization.
- Use punctuation, including an ending period, even if the alt text is a dependent clause. This helps the screen reader pause before continuing to announce the following text on the page.
- When the image type (e.g., painting, photo, screenshot, graphic) is directly relevant to the topic, describe it at the beginning of the alt text, e.g., “An oil painting of flowers in a vase by Vincent Van Vogh” situated on the same page as “A photograph by Ansel Adams of the Tetons and Snake River”.
- For UI images that aren’t otherwise declared in text, describe the function of the image, not the description of the image, e.g. “Next”, not “Right arrow”.
- Functional actions should provide additional context.
- In the case of social icons, “Twitter” as alt text is not very helpful. Does the social icon mean “Share this page on Twitter” or “Follow us on Twitter”?
- Photos of people require additional consideration.
- A person’s age, race, gender, disability status, and other attributes depend on the context; do no over-emphasize an aspect of a person if it is not relevant to the context.
- Alt text should include mood or feeling to humanize photos of people, e.g., “Two women laughing on a couch together as they use an iPad to watch videos.”
From the alt text training by Microsoft MSCOM:
 |
Context | |
|---|---|---|
| Encyclopedia website: “The Colorado River running through the steep-sided walls of the Grand Canyon.” |
Photography website: “The vivid colors and shadows of the Grand Canyon enhanced by sunset.” |
|
| Travel website: “The view from the South Rim Visitors’ Center observation deck.” |
Yoga website: [blank] |
|
- WCAG spec | 1.1.1 Non-text Content
- W3C HTML spec | 4.7.1.1 Requirements for providing text to act as an alternative for images
- WhatWG HTML spec | 4.8.4.4 Requirements for providing text to act as an alternative for images
- Alt text class by Microsoft MSCOM, free, offered several times a year