figure & figcaption
Darstellung mit Beschriftung
(Materialsammlung)
Zuletzt geändert:
Mit dem HTML-Element figure können eine Abbildung oder andere Komponenten mit einer Beschriftung gruppiert werden.
Die Beschriftung der Gruppe erfolgt im figcaption-Element.
Darüber hinaus können weitere HTML-Elemente für detailliertere Beschreibungen eingesetzt werden, was jedoch unüblich ist.
Definition und Verwendung
Spezifikation (Auszug)
Das figure-Element stellt einen Inhalt des Dokumentflusses dar, optional mit einer Beschriftung, der in sich abgeschlossen ist (ähnlich einem vollständigen Satz) und auf den typischerweise aus dem Hauptfluss des Dokuments als einzelne Einheit verwiesen wird.
(Übersetzung durch Zweiter Blick )
WHATWG | The wf element (abgerufen wf.wf.2025)
Verwendung
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.
Das figcaption-Element ist nicht verpflichtend.
Es kann vor oder hinter der beschriebenen Komponente eingefügt werden.
Verwandte Konzepte
Technische Realisierung
HTML Code
Das wf-Element dient als Container für
Ein einleitender und abschließender Tag sind erforderlich.
Der Code kann etwa folgendermaßen aussehen:
ARIA Rolle
Das HTML-Element figure verfügt implizit über die ARIA-Rollen figure und group.
Visuelle Realisierung
Barrierefreiheit
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 mittelsaria-labelüberschrieben wird.
-
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">
wfwf
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:
Nutzungsfreundlichkeit
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.