Reviewed September 30, 2026
Alternative text for images
Alt text is the text a screen reader speaks when it reaches an image. Write the purpose of the image, not a caption of its pixels. WCAG 2.2 success criterion 1.1.1 requires that text alternative unless the image is pure decoration.
What should alt text say?
Match the job the image is doing in the page. If the image is a link or button, the alt text is the destination or action: “Account settings”, not “gear icon”. If the image conveys data, such as a chart, the alternative is the data, or a table next to the chart. If the surrounding sentence already states the same fact, use an empty alt attribute so assistive technology skips it.
Keep it short enough to listen to. A product photo needs the product name and the distinguishing detail a shopper would use, such as color. A complex diagram needs a short alt plus a longer description in the page text beside it. Do not paste a filename such as hero-final-v3.jpg into the alt attribute.
Which images are decorative?
- Empty alt for spacers, borders, and icons that repeat a visible text label.
- A short description when the photo itself is the content, such as a product photo or a news photo.
- No “image of” or “picture of” prefix. Screen readers already announce the image role.
- CSS background images are invisible to the accessibility tree. If the background carries information, put that information in text.
How do you test alt text?
Turn off images in the browser and read the page. Every informative image should leave a text equivalent in its place. Then listen with a screen reader. Decorative images should be silent. Linked images should announce a destination, not “image” or a file path.
Automated scanners catch a missing alt attribute. They cannot tell whether the words are useful. A human still has to decide whether “photo” or “chart” is enough, or whether the page needs the numbers.
What about images of text?
Success criterion 1.4.5 (Images of Text, Level AA) says to use real text for words the user needs, except for logos and cases where the presentation of the text is essential. A promotional banner that is a flattened JPEG of a headline fails this if the headline is not also available as HTML text. Real text can be resized, recolored, and selected. An image of that text cannot.
The normative wording is in WCAG 2.2, section 1.1.1. The explanation of images of text is in Understanding 1.4.5.
Questions and answers
What is alt text?
Alt text is the text alternative for an image. A screen reader speaks it when it reaches the image. WCAG 2.2 success criterion 1.1.1 (Non-text Content, Level A) requires a text alternative that serves the same purpose, unless the image is pure decoration.
When should alt text be empty?
Use an empty alt attribute (alt="") when the image is decorative, or when the surrounding sentence already states the same fact. An empty alt tells assistive technology to skip the image. A missing alt attribute is different: many screen readers then read the filename.
Should alt text start with “image of”?
No. Screen readers already announce the image role. Start with the purpose of the image. For a linked image, the alt text is the destination or action, such as “Account settings”, not a description of the icon.
Do images of text pass WCAG?
Success criterion 1.4.5 (Images of Text, Level AA) says to use real text for words the user needs, except for logos and cases where the presentation of the text is essential. A banner that is a flattened JPEG of a headline fails if that headline is not also available as text.
Related guides
Ask for a review of a specific page
Send the URL and the template you care about. The reply names the highest-risk WCAG failures and the order to fix them.
Request an audit