Does each image that conveys information have, where necessary, a detailed description?

A bar chart showing unemployment trends over ten years, a geographic map with colored zones, an electrical diagram: for these images, a few words of alt text is not enough. A screen reader user needs the same information as someone viewing the image. If the information is complex, the description must be too.

Criterion 1.6 applies only to informative images that cannot be described exhaustively in short alt text. The distinction is simple: if the alt conveys all the information, this criterion does not apply. If the alt can only sketch the content, a detailed description is mandatory.

Several mechanisms are accepted depending on the element type: the longdesc attribute for <img>, an aria-describedby attribute pointing to a text passage, a link or button adjacent to the image for accessing the description, or a reference within the alt text itself. <svg> and <canvas> elements have their own rules, covered by tests 1.6.5 through 1.6.8.

Be careful with restitution testing: for <svg> and <canvas> using aria-describedby, aria-label, or aria-labelledby, it is not enough that the attribute is present. You must verify that the content is actually vocalized by assistive technologies (tests 1.6.6 and 1.6.8).

10 tests to verify that a detailed description accompanies complex images

Detailed description <img> and role="img"

For each <img> and element with role="img" whose information is too complex for the alt:

  1. Verify that at least one of these solutions is present:
    • A longdesc attribute with the URL of the page (or anchor in the page) containing the complete description.
    • Alt text (alt or aria-label) that explicitly mentions an adjacent description.
    • A link or button next to the image allowing access to the description.
  2. If none of these solutions is present for at least one image, the test fails.

Detailed description <object>

For each <object type="image/…"> requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • The object's alt text mentions the location of an adjacent description.
    • A link or button adjacent to it leads to the complete description.
  2. Note: longdesc is not an accepted mechanism for <object>.
  3. If no solution is present for at least one element, the test fails.

Detailed description <embed>

For each <embed type="image/…"> requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • The element's alt text mentions the location of an adjacent description.
    • A link or button adjacent to it leads to the complete description.
  2. If no solution is present for at least one element, the test fails.

Detailed description <input type="image">

For each <input type="image"> requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • The alt text mentions the location of an adjacent description.
    • A link or button adjacent to it leads to the complete description.
    • An aria-describedby attribute points to an element containing the detailed description.
  2. If no solution is present for at least one element, the test fails.

Detailed description <svg>

For each <svg> requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • aria-label containing both the short alternative and a reference to the adjacent description.
    • aria-labelledby referencing two elements: one for the short name, one for the long description.
    • aria-describedby pointing to an element containing the detailed description.
    • A link or button adjacent allowing access to the description.
  2. If no solution is present for at least one <svg>, the test fails.

Rendering of detailed description <svg>

For each <svg> whose detailed description uses aria-label, aria-labelledby, or aria-describedby:

  1. Test with at least one screen reader (NVDA, JAWS, or VoiceOver).
  2. Verify that the description content is properly vocalized when navigating the image.
  3. If the description is not rendered, the test fails — even if the attribute is syntactically correct.

Detailed description <canvas>

For each <canvas> requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • aria-label containing the short alternative and a reference to the adjacent description.
    • aria-labelledby referencing two elements: short name and long description.
    • Text content between <canvas> and </canvas> referencing an adjacent description.
    • Text content between <canvas> and </canvas> constituting the detailed description directly.
    • A link or button adjacent leading to the description.
  2. If no solution is present for at least one <canvas>, the test fails.

Rendering of detailed description <canvas>

For each <canvas> whose detailed description uses aria-label, aria-labelledby, or aria-describedby:

  1. Test with at least one screen reader.
  2. Verify that the description content is properly vocalized when navigating the element.
  3. If the description is not rendered, the test fails — even if the attribute is present and syntactically valid.

Rendering via aria-describedby for all images

This test covers all types of images (<img>, <input type="image">, <area>, <object>, <embed>, <svg>, <canvas>, role="img") whose detailed description is provided via aria-describedby:

  1. Identify all such elements using aria-describedby for a long description.
  2. For each, test with a screen reader: the referenced description must be vocalized.
  3. If the description is not rendered for at least one element, the test fails.

Detailed description for elements role="img"

For each element with role="img" (a <div>, a <span>, etc.) requiring a detailed description:

  1. Verify that at least one of these solutions is present:
    • aria-label containing the short alternative and a reference to the adjacent description.
    • aria-labelledby referencing two elements: short name and long description.
    • aria-describedby pointing to an element containing the detailed description.
    • A link or button adjacent leading to the description.
  2. If no solution is present for at least one element, the test fails.

Examples

❌ Non-compliant : Complex chart without detailed description

<img src="evolution-part-marche-2015-2024.png" alt="Market share evolution 2015-2024">

The alt attribute indicates that the image shows an evolution, but without figures, without trends, without legend. A screen reader user knows this is a chart, but cannot extract the data. The useful information — the values, the gaps, the trends — is lost.

✅ Compliant : Chart with longdesc pointing to a complete description

<img
  src="evolution-part-marche-2015-2024.png"
  alt="Market share evolution 2015-2024 (see detailed description)"
  longdesc="#description-graphique-marche"
>
 
<div id="description-graphique-marche">
  <h3>Detailed description: market share evolution 2015-2024</h3>
  <p>In 2015, company A holds 42% of the market, B 31%, C 27%. In 2020, A rises to 48%, B falls to 26%, C remains stable at 26%. In 2024, A reaches 55%, B drops to 21%, C falls to 24%.</p>
</div>

The longdesc attribute points to a section on the same page containing the complete data. The alt text warns the user that a description is available. A screen reader can access the detailed figures exactly as a user viewing the chart would read them.

✅ Compliant : Complex SVG with aria-describedby

<svg role="img" aria-labelledby="titre-carte" aria-describedby="desc-carte">
  <title id="titre-carte">Map of election results by region</title>
  <!-- SVG paths of regions -->
</svg>
 
<p id="desc-carte">
  The map shows first-round results. Candidate A leads in 67 regions (colored blue),
  candidate B in 31 regions (orange), candidate C in 7 regions (green).
  Île-de-France regions vote predominantly for A with scores above 35%.
</p>

The <svg> exposes a short name via aria-labelledby and a long description via aria-describedby. The description text is visible on the page — which also benefits users with low vision or those who prefer reading to interpreting complex visuals. Remains to validate test 1.6.6: verify actual restitution with a screen reader.

Tips and pitfalls

⚠️ The longdesc attribute is present but not tested

longdesc is one of the least well-supported HTML attributes in practice. The attribute may be syntactically valid and point to the correct URL, but certain browser/screen reader combinations do not expose it. In RGAA audits, tests 1.6.6, 1.6.8, and 1.6.9 require verification of actual restitution — not just source code checking. The presence of the attribute is not enough.

⚠️ Confusing short description (alt) and detailed description

Criterion 1.6 applies only if alt cannot convey all the information. A product photo with descriptive alt satisfies criterion 1.5, not 1.6. Detailed description is reserved for complex images: data charts, maps, diagrams, blueprints. If your alt is 120 characters and says everything, there's no need to add a longdesc.

💡 The adjacent link: the most robust solution

A link or button next to the image, leading to a page or section with description, works with all screen readers without exception, without depending on longdesc support or ARIA restitution quirks. This is the technique most reliably passing tests 1.6.1 through 1.6.5 and 1.6.10. The link text must be explicit: "Detailed description of sales chart", not "Learn more".

⚠️ aria-describedby and off-screen text: classic pitfall

Hiding the detailed description with display: none or visibility: hidden makes it inaccessible to screen readers, even if aria-describedby references it. If you want to hide it visually but keep it accessible, use a CSS class like visually-hidden (position absolute, clip, etc.). But beware: text visually hidden but vocalized can confuse sighted users. Visible description benefits everyone.

⚠️ canvas: two levels of solution

For <canvas>, the RGAA accepts fallback content between opening and closing tags. This content is rendered to screen readers when the canvas is unsupported, but also serves as accessible alternative in modern browsers. A <canvas> containing the description directly between its tags satisfies test 1.6.7 without requiring ARIA — often the simplest solution for dynamically generated charts.

💡 Making the description visible benefits everyone

A detailed description placed in a visible element just below the image (a <p>, a <details>) benefits screen reader users, but also people with low vision, mobile users struggling to read a small chart, and search engines. This is not a compromise: it is often the best solution for everyone.

Frequently asked questions

When does an image require an RGAA detailed description rather than simple alt text?

The practical rule: if you cannot convey all the useful information from the image in one or two sentences, a detailed description is necessary. A chart with numeric values, a map with multiple zones, an organization chart with hierarchical relationships: these images require long description. An icon, an illustrative photo, or a product image: well-written alt text is usually sufficient.

How do I integrate an RGAA detailed description in a <details> element hidden by default?

Yes, this is a good solution. A <details><summary>Detailed description</summary><p>...</p></details> element placed just after the image satisfies the criterion: the link (here the <summary>) is adjacent, and the description is accessible. Modern screen readers properly render <details> content. However, verify that the <summary> is descriptive enough to understand which image it relates to.

How do I audit RGAA criterion 1.6 on detailed descriptions in practice?

In three steps: 1) Identify complex images (charts, maps, diagrams) — these are the candidates. 2) Verify in source code that a description mechanism is present (longdesc, aria-describedby, adjacent link, fallback text for <canvas>). 3) For ARIA mechanisms (aria-describedby, aria-label, aria-labelledby on SVG and canvas), test actual restitution with NVDA + Firefox or JAWS + Chrome. This third step is what most beginning auditors forget.

How do I distinguish an informative image from a decorative one to apply RGAA criterion 1.6?

No. Criterion 1.6 concerns only informative images requiring detailed description. A decorative image must have alt="" (criterion 1.2) and has no description to provide. If your image has alt="", you have nothing to verify for 1.6.

How do I use aria-describedby on an <img> to satisfy RGAA criterion 1.6?

Yes. Test 1.6.1 cites longdesc, alt text referencing an adjacent description, or an adjacent link/button. But test 1.6.9 covers aria-describedby for all image types, including <img>. This technique is valid: <img aria-describedby="desc"> with an element id="desc" containing the description. Then verify restitution (test 1.6.9) — support varies across browser/screen reader combinations.

References

RGAA 4.1.2: Criterion 1.6
WCAG 2.1:1.1.1 (A)G92G74G73H45ARIA61.1.1 (A)