Rol Documentstructuur

`figure`

Markeert een op zichzelf staand illustratief blok — afbeelding, diagram, codeoverzicht — doorgaans gecombineerd met een onderschrift. Gebruik eerst het native <figure>-element; grijp naar role="figure" alleen wanneer het hostelement geen <figure> kan zijn.

Wanneer gebruiken

Gebruik <figure> en <figcaption>. Het native element verzorgt de rol, de onderschriftkoppeling en de documentoverzichtsemantieken.

role="figure" is alleen passend wanneer het native element niet gebruikt kan worden. Combineer het met een toegankelijke naam — ofwel een aria-labelledby die wijst naar een onderschriftelement, ofwel een aria-label met de onderschrifttekst.

Een figuur kondigt “figuur, [onderschrift]” aan in schermlesers, wat aangeeft dat wat volgt illustratief is en geen lopende tekst. Gebruik het voor codeoverzichten, schema’s, grafieken en inline afbeeldingen die een onderschrift rechtvaardigen — niet voor elke decoratieve afbeelding.

Veelvoorkomende fouten

<figure> zonder <figcaption> en zonder aria-label. De figuur heeft geen toegankelijke naam en de rol voegt weinig waarde toe.
role="figure" op een <div> die een <img> omhult waarvan de alt de beschrijving al volledig dekt. Overbodig; gebruik gewoon de <img>.
<figcaption> buiten de <figure> plaatsen. Het onderschrift moet een directe afstammeling zijn voor de native koppeling te werken.
Meerdere figuren op een pagina met dezelfde onderschrifttekst. Voeg aria-labelledby toe die wijst naar een uniek element zodat navigatie per figuur werkt.
role="figure" direct op een <img>. Gebruik het op het omhullende element, met de afbeelding erin.

Voorbeeld

<!-- Voorkeur -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Focusindicator vastgelopen op een modaal venster zonder ontsnappingsroute">
  <figcaption>Een toetsenbordval in een slecht gebouwd modaal venster.</figcaption>
</figure>

<!-- Wanneer <figure> onmogelijk is -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tabvolgorde door een ontoegankelijke single-page-applicatie.</p>
</div>