Accessible Images: Alt Text, Decorative Images and WCAG

What are accessible images?

Accessible images give people who cannot see them the same information or function everyone else gets, through a text alternative. In HTML that is mostly the alt attribute on img. WCAG Success Criterion 1.1.1 (level A) requires non-text content to have a text alternative that serves the equivalent purpose, and lets pure decoration through only if it is implemented so assistive technology can ignore it.

Start with the purpose, not the picture

The right text alternative depends on why the image is on the page. The W3C WAI Images Tutorial puts it this way: it is determined by the author, based on usage, context and content. A photo of a bird needs a brief mention on a parks site and a detailed description on a birdwatching site. Ask what the image is for, then pick the type:

How it looks in HTML

<!-- Informative: say what it means -->
<img src="dog.jpg" alt="Dog with a bell attached to its collar">

<!-- Decorative: empty alt, nothing is announced -->
<img src="divider.png" alt="">

<!-- Functional: describe the action, not the picture -->
<a href="/print"><img src="printer.svg" alt="Print this page"></a>

A screen reader reads the alt text in place of the image. When the attribute is missing, the screen reader may announce the file name instead, which is noise at best. An empty alt="" tells it to skip the image on purpose, and that is a different thing from leaving the attribute out.

Complex images

A chart or diagram needs two parts: a short alt that identifies the image, and a long description in the page content with the essential information. The WAI tutorial describes several ways to connect them: a link next to the image, a figure with a figcaption, or aria-describedby pointing at a paragraph. The last one treats the target as one continuous paragraph, so it only suits plain text, not headings or tables. A data table next to the chart often serves everyone best.

Where ARIA fits

Prefer native HTML. The alt attribute is the primary mechanism. The WAI tutorial notes that role="presentation" is not as widely supported as an empty alt for decorative images. Reach for ARIA when HTML alone cannot express the relationship, for example aria-describedby for a long description. Decorative images are better delivered as CSS backgrounds, which keeps them out of the markup.

Common mistakes

• No alt attribute. The file name may be read aloud, and automated checkers flag it.
• File name or "image of" as alt. Say what the image conveys. For a functional image, "Print this page" beats "(image of a) printer".
• Repeating adjacent text. If a link already says "Pricing", an icon beside it needs an empty alt.
• Text in an image with no text alternative. If the words appear nowhere else, the alt must contain them.
• A chart with only a slogan as alt. Put the data on the page.
• Marking meaningful images as decorative. That decision is a judgment about context, so review it, not just script it.

Testing and monitoring accessible images

Automated accessibility testing can find a missing alt, but it cannot judge whether the text is accurate, because the W3C WAI Images Tutorial says that is the author's call. Pair automated scans with manual review of the images that carry meaning. LoadFocus Page Speed Monitoring runs scheduled Lighthouse audits that include the Accessibility category, from 25 cloud regions. Accessible images can also be fast images, so check image size while you are at it. For more, see why performance testing must include accessibility, the best tools for website accessibility testing and why you should improve the images on your website. All three posts are in English. The wider rule set lives in WCAG.

FAQ: Accessible images

What is alt text?

Alt text is the text alternative in the alt attribute of an img element. Screen readers, braille displays and browsers with images turned off use it in place of the image.

Does every image need alt text?

Every img needs the alt attribute. Informative and functional images need a meaningful value. Decorative images need an empty one, alt="", so assistive technology skips them.

How long should alt text be?

Short. The WAI tutorial describes informative alt text as a short phrase or sentence. If the image needs more than that, as a chart does, put the long description in the page content.

When should I use an empty alt?

When the image is pure decoration, only formatting, or duplicates text that is already next to it. Treat it as a decision about context and not as a way to skip the work.

Do I need aria-label on images?

Usually not. A correct alt is the standard route for img. ARIA helps with links to long descriptions, such as aria-describedby on a complex image.

How do I describe a chart?

Give it a short alt that names the chart and put the essential data in text on the page, for example in a table or in the surrounding paragraph.