Rolle Dokumentstruktur

`figure`

Markerer en selvstændig illustrativ blok — billede, diagram, kodelisting — typisk parret med en billedtekst. Brug det native <figure>-element først; brug kun role="figure", når værtselementet ikke kan være et <figure>.

Hvornår skal den bruges

Brug <figure> og <figcaption>. Det native element håndterer rollen, billedteksttilknytningen og dokumentstruktursemantikken.

role="figure" er kun relevant, når det native element ikke kan bruges. Parres med et tilgængeligt navn — enten en aria-labelledby, der peger på et billedtekstelement, eller en aria-label med billedtekstteksten.

En figur annoncerer “figur, [billedtekst]” i skærmlæsere og signalerer, at det efterfølgende er illustrativt frem for løbende prosa. Brug den til kodelister, skemaer, diagrammer og inline-billeder, der berettiger en billedtekst — ikke til hvert dekorativt billede.

Typiske fejl

<figure> uden <figcaption> og uden aria-label. Figuren har intet tilgængeligt navn, og rollen tilføjer ringe værdi.
role="figure" på en <div>, der omslutter et <img>, hvis alt allerede dækker beskrivelsen. Overflødigt; brug blot <img>.
Placering af <figcaption> uden for <figure>. Billedteksten skal være et direkte underordnet element for at den native tilknytning virker.
Flere figurer på en side med samme billedtekst. Tilføj aria-labelledby, der peger på et unikt element, så navigation via figurer fungerer.
role="figure" direkte på et <img>. Brug det på det omsluttende element med billedet indeni.

Eksempel

<!-- Foretrukket -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Fokusindikator fanget på et modalt overlay uden flugtvej">
  <figcaption>En tastaturindespærring inde i en dårligt bygget modal.</figcaption>
</figure>

<!-- Når <figure> er umuligt -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tabuleringsrækkefølge gennem en utilgængelig single-page-app.</p>
</div>