Alternative text

Alternative text is the text that a screen reader reads instead of an image. In HTML, it's the alt attribute on images. Its content depends on the image's role on the page: informative, decorative, or functional.

58% of homepages analyzed by WebAIM Million have at least one image without alternative text. It's the most common accessibility defect on the web.

#What text should go in the alt attribute?

It depends on the image's role. The W3C proposes a decision tree that comes down to three cases :

  • Informative image : it conveys content. The alt describes what it shows, not what it looks like.
  • Decorative image : it adds nothing to the meaning. The alt must be empty : alt="".
  • Image link : it serves as a link or button. The alt describes the destination or action, not the image.
<!-- Informative: describes the content -->
<img src="graph-ventes.png" alt="Sales up 25% in Q3 2025">
 
<!-- Decorative: alt empty -->
<img src="bordure.png" alt="">
 
<!-- Image link: describes the destination -->
<a href="/"><img src="logo.svg" alt="Home"></a>

The same visual can require a different alt depending on the page. A maple leaf on a Canadian tourism site ? alt="Canada". In a botany manual ? alt="Sugar maple leaf (Acer saccharum)". Context determines everything.

#The mistakes everyone makes

alt missing vs alt empty. Without the alt attribute, most screen readers read the filename : IMG_20250114_crop_final_v2.jpg. With alt="", they skip the image. The difference is huge for the user.

alt="image". Screen readers already announce "image" before reading the alt. Writing alt="image" produces "image, image". Same with "photo of…" or "illustration of…".

The forgotten image link. When an image is the only content in a link and has no alt, the screen reader has nothing to announce. The link becomes invisible.

#What the standard says

WCAG criterion 1.1.1 (level A, the minimum) requires alternative text for all non-text content. RGAA dedicates its entire theme 1 to it : nine criteria cover <img>, <svg>, <object>, clickable areas, and image buttons.

#In summary

Every image on your page has a role. Informative : describe its content. Decorative : alt="". Link or button : describe the destination. And empty alt is not the same as missing alt.

Back to glossary
Share this article

Learn more

Alt Attribute

The alt attribute is the HTML attribute of the <img> tag that contains the alternative text of an image. Screen readers read this text in place of the image, and browsers display it when the image fails to load. Three possible states: absent, empty, or filled — each produces different behavior.

Information-carrying image

An information-carrying image is an image whose removal would cause a loss of meaning to the page. It conveys content that the surrounding text does not provide. The RGAA and WCAG require that it carries a text alternative describing the information conveyed, not the appearance of the image.

Accessible Name

The accessible name is the text that assistive technologies use to identify an interface element. The browser calculates it according to a W3C algorithm by consulting multiple sources in a strict priority order: aria-labelledby, aria-label, HTML <label>, text content, and finally the title attribute as a last resort.