Definition: Alt text is a short text version of an image that conveys its content or function. Screen readers read it aloud, and browsers show it when the image fails to load. WCAG success criterion 1.1.1 Non-text Content requires it at Level A [1].
German: Alternativtext · Also: alt attribute, alternative text · Last reviewed: 27 September 2026
What alt text is for
Blind people using a screen reader cannot see the image, so they hear its alt text instead. When it is missing, they often hear the file name – "IMG underscore 4711 dot jpg" – or nothing at all. The same goes for people reading with a braille display and anyone whose connection does not load images.
In HTML the text lives in the alt attribute of the <img> element. For SVG graphics or icons inside buttons, the accessible name does the same job.
What good alt text contains
What matters is the image's purpose on this page, not what it looks like [2][3]:
- Informative images: the essentials in one sentence. In a shop, "Red wool jumper with a roll neck" rather than "Jumper".
- Functional images, meaning images inside a link or button: the destination or the action. The magnifying glass next to the search field is "Search", not "Magnifying glass".
- Images of text: the text in the image, word for word.
- Complex graphics such as charts: a short summary in the
alt, with the data next to it as text or a table. - Decorative images: an empty
alt="". The screen reader then skips the image. Leaving the attribute out altogether is different – then the alternative is simply missing.
You can drop phrases like "image of" or "photo:". The screen reader already announces that it is a graphic [4].
In code
<!-- Missing: the file name is read out -->
<a href="/basket/">
<img src="cart.svg">
</a>
<img src="wave-divider.png"><!-- Better: function, not appearance -->
<a href="/basket/">
<img src="cart.svg" alt="Basket">
</a>
<!-- Decorative: empty alt, skipped -->
<img src="wave-divider.png" alt="">Common mistakes
- A file name or placeholder as the text, such as "DSC_0042", "image" or "banner".
- Keywords instead of a description. A list of search terms helps nobody who is listening.
- Repeating the caption. If the same caption sits right next to the image, the alt text does not need to repeat it.
- Information in a CSS background image. There is no
altfor those. If such an image carries information, put it in the HTML as text. - A description in
titleinstead ofalt. Thetitleattribute only shows as a tooltip on mouse hover and is not read out reliably. - One text for every page. The same team photo can say something different on the careers page than on the "About us" page. If your images live in a media library, check the alt text where each image is actually used.
How Reviseberg handles it
Reviseberg checks every page with axe-core. The rules image-alt, input-image-alt, role-img-alt and svg-img-alt find images with no text alternative. Whether existing alt text is right is something no rule can decide, so we count WCAG 1.1.1 as only partly automatable: missing text is found, wrong text is not. For missing text, Reviseberg can suggest alt text using AI. A person reviews and accepts it – nothing is written into your website automatically.
Related terms
Screen reader · Accessible name · Accessibility tree · Braille display · Automated accessibility testing