HTML Elemente
Symbolgrafik Abbildung. Tags figure umranden Grafik mit Spektrum und darunter Textbereich

HTML figure-Element
[Materialsammlung]

Mit dem <figure>-Element kann seit HTML5 eine Abbildung mit einer Beschreibung gruppiert werden. Die Beschriftung der Abbildung erfolgt in einem <figcaption>-Element als barrierefreiem Namen der Abbildung. Darüber hinaus können weitere HTML-Elemente für detailliertere Beschreibungen eingesetzt werden.

Anwendungsbereiche

Die Ausdrücke figure und Abbildung suggerieren den Einsatz lediglich für statische visuelle Objekte. In den Spezifikationen und Tutorials erscheint die Palette an Einsatzmöglichkeiten jedoch umfangreicher:

Entscheidend ist, dass das grafische oder auditive Element mit sichtbaren textuellen Erläuterungen ergänzt wird.

Beispiel

Der Code in diesem Grundbeispiel enthält folgende Komponenten:

<figure>
  <figcaption>
    Das Baustellenschild und wie es aussieht.
  </figcaption>
  <img
    alt="Baustellenschild" 
    src="images/baustellenschild.png">
  <p>
    Ein Baustellenschild ist ein gleichseitiges Dreieck ...
  </p>
</figure>

ARIA Anweisungen

In den Accessible Rich Internet Applications (ARIA) finden sich einige Attribute, die bei korrekter Verwendung der HTML-Elemente nicht erforderlich sind:

role="figure"

Mit der Anweisung role="figure" wird aus einem neutralen Element ein Abbildungsbereich:

<div role="figure">
   ...
</div>

Bevorzugt muss jedoch das native HTML-Element <figure> verwendet werden. Eine redundante Zuweisung der entsprechenden ARIA-Rolle ist dann nicht mehr nötig:

<figure role="figure">
WAI-ARIA 1.1 # figure (role)
Die aktuelle Spezifikation der Web Accessibility Initiative zur Rolle figure.
Accessible Rich Internet Applications (WAI-ARIA) 1.3 W3C Editor's Draft 14 October 2022 # figure role

role="group"

Das <figure>-Element verfügt implizit über die Rolle group (Gruppe). Für eine umfassende Rückwärtskompatibilität kann die Rolle redundant ergänzt werden:

<figure role="group">
Can I use | HTML element: figure
Bei aktuellen Browsern erscheint die Unterstützung des <figure>-Elements lückenlos. Das ARIA-Attribut erscheint daher nur noch bei sehr vorsichtigen Menschen erforderlich.

role="none"

Mit den ARIA-Anweisungen role="none" beziehungsweise role="presentation" kann einem HTML-Element die Semantik entzogen werden. Dies gilt auch für das <figure>-Element. Die Semantik von Bildern, Überschriften usw. als Kindelemente bleibt dabei erhalten.

<figure role="none">
<figure role="presentation">

Diese Attribute können eingesetzt werden, um für Screen Reader die Ausführlichkeit der Darstellung der Abbildungssemantik zu reduzieren. CSS-Anweisungen zur visuellen Darstellung des <figure>-Elements bleiben jedoch wirksam.

JAWS verfügt in der Version 2022 über keine Funktion zum Auflisten von Abbildungen. Die Kenntnis und Nachfrage für dieses Element dürfte also in der Nutzergemeinschaft nicht groß sein.

Trotzdem solle ein technischer Entzug einer vorhandenen Semantik nur mit Bedacht eingesetzt werden. Das Erfolgskriterium 1.3.1 (Info und Beziehungen) verlangt, dass dem visuellen Erscheinungsbild eine technische Darstellung entspricht.

aria-label

Ein Abbildungsbereich könnte grundsätzlich auch mit aria-label beschriftet werden:

<figure aria-label="Baustellenschild">

Allerdings sollte gewöhnlich mit dem <figcaption>-Element eine sichtbare Beschriftung für alle vorgesehen werden. Eine Beschriftung mittels aria-label bleibt assistierenden Technologien vorbehalten.

aria-labelledby

Grundsätzlich kann auch mittels aria-labelledby auf eine Beschriftung referenziert werden. Dies erscheint zweckmäßig, wenn aus irgendeinem Grund kein natives HTML eingesetzt werden kann:

<div role="figure"
  aria-labelledby="caption1">
  <p id="caption1">
    Baustellenschild
  </p>
  ...
</div>

Werden jedoch native HTML-Elemente eingesetzt, kann auf das Referenzieren verzichtet werden:

<figure aria-labelledby="caption1">
  <figcaption id="caption1">
    Baustellenschild
  </figcaption>
  ...
</figure>

Useability Überlegungen

Beschriftung kurz und prägnant

Das Vorhandensein eines <figure>-Elements fällt Sehenden bei einer sauberen visuellen Darstellung nicht auf. Da ist ein Bild und darunter ein Text. Im Bruchteil einer Sekunde wird der Zusammenhang erkannt.

Ein zeitraubendes Erlebnis stellt hingegen die Erarbeitung dieses technischen Inhalts mit einem Screen Reader dar. Bei der Navigation mittels kündet die Sprachausgabe etwa sinnvoll Anfang und Ende des Bereichs im DOM Abbildung an.

Darüber hinaus wird der Inhalt des <figcaption>-Elements gelegentlich jeweils zusätzlich vorgelesen. Beim Betreten des <figure>-Bereichs, beim Betreten des <figcaption>-Elements und erneut beim Verlassen des Bereichs.

Folgerungen

Alternative: Abschnitt mit Überschrift

Aus der Perspektive der Barrierefreiheit dient das <figure>-Element zur Gruppierung einer Abbildung mit deren textuellen Erläuterungen. Sind Abbildung und Erläuterungen in einem eigenen Abschnitt unter einer Überschrift bereits gruppiert, sollte gänzlich auf die <figure>-Semantik verzichtet werden. Sie bringt für Screen Reader keine relevanten Zusatzinformationen, sondern lediglich wortreichen Ballast.

Der Code für das Anfangsbeispiel könnte dafür etwa folgendermaßen aussehen:

<h2>
  Das Baustellenschild und wie es aussieht.
</h2>
  <img
    alt="Baustellenschild" 
    src="images/baustellenschild.png">
  <p>
    Ein Baustellenschild ist ein gleichseitiges Dreieck ...
  </p>

<h2>[Nächste Überschrift]<];/h2>

Alternativtext sichtbar als Beschriftung

Es kann aus unterschiedlichen Gründen wünschenswert sein, zu einem Bild eine knappe Bildbeschreibung sichtbar als Bildunterschrift darzustellen. Naheliegend ist dafür die technische Realisierung als Abbildung mit der Bildbeschriftung als <figcaption>.

Eine solche Bildunterschrift entspricht inhaltlich wohl dem Alternativtext, wie er im alt-Attribut realisiert wird. Die Nutzungsfreundlichkeit für Screen Reader sollte daher durch Verbergen von Inhalten und Semantik optimiert werden:

<figure role="none">
  <img
    alt="Baustellenschild" ...>
  <figcaption aria-hidden="true">
    Baustellenschild
  </figcaption>
</figure>

Der W3C HTML Validator kennzeichnet diesen Code als fehlerhaft, da er die ARIA-Attribute im Kontext nicht berücksichtigt.