HTML figure-Element
[Materialsammlung]

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:

• Bilder, Diagramme, Landkarten und Illustrationen.
• Graphische Dokumente (SVG, …)
• Code Beispiele oder Auszüge (Snippets).
• Beispieltexte (Sprachen, Schriftarten, …).
• Videos oder Audiodateien.

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:

• Ein figure-Tag kennzeichnet Beginn und Ende der Abbildung im Code.
• Die <figcaption> enthält die sichtbare Bildüberschrift bzw. Bildunterschrift. Diese stellt auch den barrierefreien Namen der Abbildung dar, sofern der Name nicht mittels aria-label überschrieben wird.
  Laut Content model der Spezifikation ist eine figcaption optional.
• In diesem Beispiel geht es um ein Bild, das mit einem <img>-Element eingefügt wird.
• Detaillierte Erläuterungen zum Bild erscheinen außerhalb der figcaption, um den barrierefreien Namen kurz zu halten.

<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>

Labordatei mit diesem Code

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.

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>

Links als Abbildungen

Allzu oft wird ein Link aus einer Grafik und einem Text in ein <figure>-Element eingebettet. Gelegentlich werden die Grafik und der Text sogar redundant zum selben Ziel verlinkt:

<figure>
  <a href="schilder.html">
    <img ...
      alt="Verkehrsschilder">
  </a>
  <figcaption>
    <a href="schilder.html">
      Verkehrsschilder
    </a>
  </figcaption>
</figure>

Da es sich bei dieser Komponente nicht um eine Abbildung handelt, sondern um einen Link, ist der Einsatz von <figure> an dieser Stelle nicht angemessen. Ich würde diese falsche Rollenzuweisung als Fehler in Bezug auf Erfolgskriterium 4.1.2 (Name, Rolle, Wert) erachten.

Zudem führen in dem Codebeispiel zwei aufeinanderfolgende Links zum selben Ziel. Die Komponente könnte korrekt auf folgende Weise realisiert werden:

<figure>
<a href="schilder.html">
  <img ...
    alt="">
<figcaption>
  Verkehrsschilder
</a>
</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

• Der Text der <figcaption> sollte daher nicht zu wortreich sein, sondern knapp und präzise das Bild beschreiben oder kommentieren.
• Detaillierte Inhalte zum Bild werden außerhalb der <figcaption> eingefügt. Dies kann semantisch in Absätzen, Tabellen, Listen und so weiter erfolgen.

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>

Labordatei mit diesem Code für ein einfaches Bild

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