Alternative text for images

A decorative swirl and a sales chart both use the img element, but the right alt text for the first is an empty string and for the second is a full sentence.

What alt text is for

A screen reader turns a page into speech or braille. When it reaches a picture it cannot look at the pixels, so it reads the alt attribute instead. The same text appears when an image fails to load, and it is what a search engine or a text-only browser receives. WCAG 2.2 puts this first of all: success criterion 1.1.1 Non-text Content, at level A, asks that every image, icon or chart that carries information has a text alternative that serves the same purpose.

The key words are "the same purpose". Alt text is not a caption and not a list of everything in the frame. Ask what a sighted reader gets from the picture in this spot, then write that. A photo of a loaf on a bakery's home page might need only "Sourdough loaf, sliced". The same photo in an article about crust colour might need "Sourdough loaf with a dark, almost black crust and an open crumb". Same file, different job, different text.

Four common cases

The W3C images tutorial sorts most pictures into a few groups. Informative images, such as a photo or a simple diagram, get a short description of what they show. Decorative images, such as a divider line or a background texture, get an empty alt, written alt="", which tells assistive technology to skip them. Functional images, such as a logo that links home or a magnifying glass that submits a search, get text that says what happens: "Corner Bakery home" or "Search", not "logo" or "magnifying glass". Images of text get the words in the image.

Leaving the attribute out is not the same as leaving it empty. With no alt at all, some screen readers fall back to reading the file name, so a listener may hear something like "IMG underscore 4032 dot jpeg". An empty alt is a deliberate choice that says "nothing to see here". For a complex chart, keep the alt short ("Bar chart of monthly sales, described below") and put the numbers in a table or paragraph next to it, where everyone can read them.

Images that are not img elements

Pictures can also arrive as inline SVG or as CSS background images. A CSS background has no place for alt text at all, so it should be used only for decoration; anything that carries meaning belongs in the HTML. An inline svg that is pure decoration can be hidden with aria-hidden="true", which unit 6 explains. WCAG sets no character limit for alt text, but the W3C tutorial keeps returning to the same advice: be brief and give what matters in this context. If you find yourself writing three sentences, the content probably belongs in the page text where everyone can read it.

You can check your own pages without special software. View the page source and search for <img: every match should have an alt attribute, empty or not. The developer tools in major browsers also include an accessibility panel that shows the name each image ends up with. Reading those names in a row, out of context, is a good test. If a list says "image, image, chart, logo", a screen reader user hears exactly that.