figure

Verwendung

<figure> und <figcaption> sind zu bevorzugen. Das native Element übernimmt die Rolle, die Beschriftungsverknüpfung und die Dokumentgliederungssemantik.

role="figure" ist nur dann geeignet, wenn das native Element nicht verwendet werden kann. Es ist ein zugänglicher Name erforderlich — entweder ein aria-labelledby, das auf ein Beschriftungselement verweist, oder ein aria-label mit dem Beschriftungstext.

Ein Figure kündigt im Screenreader „figure, [Beschriftung]“ an und signalisiert damit, dass der folgende Inhalt illustrativ und kein fortlaufender Fließtext ist. Zu verwenden ist es für Code-Listings, Schemata, Diagramme und eingebettete Bilder, die eine Bildunterschrift rechtfertigen — nicht für jedes dekorative Bild.

Häufige Fehler

• <figure> ohne <figcaption> und ohne aria-label. Das Figure hat keinen zugänglichen Namen; die Rolle bietet keinen Mehrwert.
• role="figure" auf einem <div>, das ein <img> umschließt, dessen alt-Text die Beschreibung bereits vollständig abdeckt. Redundant — das <img> allein genügt.
• <figcaption> außerhalb des <figure>. Die Beschriftung muss ein direktes Kindelement sein, damit die native Verknüpfung funktioniert.
• Mehrere Figures auf einer Seite mit identischem Beschriftungstext. Mit aria-labelledby auf ein eindeutiges Element verweisen, damit die Figure-Navigation funktioniert.
• role="figure" direkt auf einem <img>. Die Rolle gehört auf das umschließende Element; das Bild befindet sich darin.

Beispiel

<!-- Bevorzugt -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Fokusindikator auf einem modalen Overlay ohne Ausstiegsmöglichkeit">
  <figcaption>Eine Tastaturfalle in einem schlecht entwickelten Modal.</figcaption>
</figure>

<!-- Wenn <figure> nicht möglich ist -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Tab-Reihenfolge durch eine unzugängliche Single-Page-App.</p>
</div>