Detailed Description

A detailed description is a long text that complements the alt text of a complex image (chart, diagram, map). When a single sentence is not enough to convey the information carried by a visual, the detailed description provides the complete textual equivalent, in the form of paragraphs, lists, or data tables.

A quarterly sales chart with alt="Chart of 2025 sales" conveys nothing to someone who cannot see the image. The figures remain hidden. The trends too. The detailed description exists to fill this gap.

#When alt is not enough

The W3C classifies complex images separately: charts, organizational charts, diagrams, maps. For these visuals, a single sentence of alt cannot convey the information.

Two texts are needed:

  • The short one: the alt, which identifies the image in one sentence.
  • The long one: the detailed description, which conveys all the information carried by the visual.

RGAA criterion 1.6 checks this point: each image carrying complex information must have a detailed description, adjacent to the image or accessible via a link positioned right next to it.

#How to implement it

Forget longdesc. The attribute was the subject of a W3C recommendation in 2015, but browsers no longer support it.

Two approaches work today:

aria-describedby links the image to an element on the page containing the description:

<figure>
  <img src="sales-q3.png"
       alt="Chart of Q3 2025 sales"
       aria-describedby="desc-sales">
  <p id="desc-sales">
    Revenue of 1.2 M€ in Q3,
    up 18% compared to Q2.
    The B2B sector represents 67% of the total.
  </p>
</figure>

Adjacent link: the W3C G73 technique places a link right after the image, pointing to the complete description. Useful when the description is long and would clutter the page.

#The classic trap

Cramming 80 words into the alt. Screen readers read the alt all at once, without pause. Beyond two sentences, the user loses focus. The detailed description, on the other hand, reads like normal text: paragraphs, lists, data tables. Deque University recommends not exceeding 140 characters in the alt.

A less visible trap: hiding the description with CSS (display: none) without linking it via aria-describedby. Content hidden visually is only accessible to assistive technologies if it is linked by an ARIA attribute. Without this link, the text exists in the code. No one finds it.

#In summary

A complex image needs two texts: a short alt that identifies it, a detailed description that conveys the information. Forget longdesc. Use aria-describedby or an adjacent link.

Back to glossary
Share this article

Learn more

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.

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.

Alternative Content

Alternative content is an equivalent that replaces non-textual content to make it perceivable by everyone. The alt attribute on an image is its most well-known form, but the concept also covers captions, text transcriptions, and audio descriptions. WCAG makes it their very first principle.