figure

När används det

Använd <figure> och <figcaption>. Det native elementet hanterar rollen, bildtextkopplingen och dokumentstruktursemantiken.

role="figure" är lämpligt bara när du inte kan använda det native elementet. Para det med ett tillgängligt namn — antingen ett aria-labelledby som pekar på ett bildtextelement, eller ett aria-label med bildtexten.

En figur annonseras som “figur, [bildtext]” i skärmläsare, vilket signalerar att det som följer är illustrativt snarare än löpande text. Använd det för kodlistningar, schematiska figurer, diagram och inline-bilder som förtjänar en bildtext — inte för varje dekorativ bild.

Vanliga fel

• <figure> utan <figcaption> och utan aria-label. Figuren har inget tillgängligt namn och rollen tillför föga värde.
• role="figure" på en <div> som omger ett <img> vars alt redan täcker beskrivningen. Redundant; använd bara <img>.
• Att placera <figcaption> utanför <figure>. Bildtexten måste vara ett direkt barn för att den native kopplingen ska fungera.
• Flera figurer på en sida med samma bildtext. Lägg till aria-labelledby som pekar på ett unikt element så att navigering per figur fungerar.
• role="figure" direkt på ett <img>. Använd det på det omgivande elementet, med bilden inuti.

Exempel

<!-- Rekommenderat -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Fokusindikator fastnad på ett modalt överlager utan flyktväg">
  <figcaption>En tangentbordsfälla inuti en dåligt byggd modal.</figcaption>
</figure>

<!-- När <figure> är omöjligt -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab-ordning genom en otillgänglig single-page-app.</p>
</div>