figure und figcaption: Abbildungen semantisch auszeichnen

Ein Bild mit einer Bildunterschrift, ein Diagramm mit Erklärung, ein Code-Beispiel mit Titel – all diese Inhaltstypen bestehen aus zwei zusammengehörigen Teilen: dem visuellen Inhalt und seiner Beschriftung. HTML bietet dafür die semantischen Elemente <code>&lt;figure&gt;</code> und <code>&lt;figcaption&gt;</code>. Sie kommunizieren assistiven Technologien, dass Inhalt und Beschriftung zusammengehören – eine Information, die mit einem einfachen <code>&lt;div&gt;</code> und <code>&lt;p&gt;</code> verloren ginge. Für die BFSG-Konformität nach EN 301 549 Abschnitt 11.1.3.1 sind semantisch korrekte Gruppierungen ein Grundpfeiler.

Grundlagen: figure als semantische Gruppierung

Das <figure>-Element repräsentiert einen eigenständigen Inhalt, der im Haupttext referenziert wird, aber auch eigenständig verständlich sein kann – wie eine Abbildung in einem Buch. Semantik: <figure> hat die implizite ARIA-Rolle figure. Screenreader kündigen es als „Abbildung" an und kommunizieren die Gruppierung. Was gehört in ein figure? Bilder (<img>), Diagramme, Illustrationen, Code-Beispiele (<pre><code>), Tabellen, Zitate (<blockquote>), Videos, Audio-Inhalte. Was gehört NICHT in ein figure? Dekorative Bilder ohne informativen Wert, Layout-Elemente, Navigationselemente. Positionierung im Dokument: <figure> sollte im Textfluss dort stehen, wo es thematisch hingehört. CSS positioniert es visuell – die DOM-Reihenfolge bleibt semantisch korrekt (WCAG 1.3.2 – Bedeutungstragende Reihenfolge).

figcaption: Die barrierefreie Bildunterschrift

<figcaption> ist das einzige Element, das als Beschriftung einer <figure> dient. Es kann als erstes oder letztes Kind der <figure> stehen: <figure><img src="diagramm.png" alt="Balkendiagramm der Verkaufszahlen 2024"><figcaption>Abb. 1: Verkaufszahlen nach Quartal, 2024</figcaption></figure>. Zugänglicher Name: Das <figcaption> wird automatisch als zugänglicher Name der <figure> verwendet. Screenreader lesen: „Abbildung, Abb. 1: Verkaufszahlen nach Quartal, 2024". figcaption vs. alt-Text: Der alt-Text beschreibt, was auf dem Bild zu sehen ist (für Nutzer, die das Bild nicht sehen können). Das <figcaption> beschreibt die Bedeutung oder den Kontext des Bildes (für alle Nutzer sichtbar). Beide ergänzen sich und sollten nicht identisch sein. WCAG 1.1.1 verlangt Textalternativen für Nicht-Text-Inhalte – alt und <figcaption> erfüllen unterschiedliche Aspekte dieser Anforderung.

Bilder und Diagramme barrierefrei einbetten

Fotos und Illustrationen: <figure><img src="foto.jpg" alt="Beschreibung des Bildinhalts"><figcaption>Kontextuelle Bildunterschrift</figcaption></figure>. Komplexe Diagramme: Für Diagramme reicht ein alt-Text oft nicht aus. Verwenden Sie eine ausführliche Beschreibung: <figure><img src="chart.png" alt="Balkendiagramm – Details in der Tabelle unten" aria-describedby="chart-data"><figcaption>Abb. 2: Nutzerzahlen 2020-2024</figcaption><table id="chart-data">...</table></figure>. Die Datentabelle innerhalb der <figure> bietet die vollständige Information. SVG-Grafiken: <figure><svg role="img" aria-labelledby="svg-title"><title id="svg-title">Beschreibung</title>...</svg><figcaption>Bildunterschrift</figcaption></figure>. Responsive Bilder: <figure><picture><source>...<img alt="..."></picture><figcaption>...</figcaption></figure>. Das <figure>-Element umschließt das gesamte <picture>-Element. EN 301 549 Abschnitt 11.1.1.1 verlangt Textalternativen für alle nicht-textuellen Inhalte.

Code-Beispiele und Zitate in figure

<figure> eignet sich hervorragend für Code-Beispiele in technischer Dokumentation: <figure><pre><code>const button = document.querySelector("button");</code></pre><figcaption>JavaScript: Button-Element auswählen</figcaption></figure>. Vorteile: Screenreader kommunizieren den Zusammenhang zwischen Code und Beschriftung. Die <figcaption> gibt dem Code-Beispiel einen verständlichen Namen. Zitate: Blockzitate mit Quellenangabe profitieren ebenfalls: <figure><blockquote><p>Barrierefreiheit ist kein Feature, sondern ein Grundrecht.</p></blockquote><figcaption>— Tim Berners-Lee, W3C</figcaption></figure>. Tabellen: Datentabellen mit einer Beschriftung können ebenfalls in <figure> stehen, wobei <caption> innerhalb der <table> bevorzugt werden sollte. <figcaption> dient dann für zusätzlichen Kontext außerhalb der Tabelle. WCAG 1.3.1 verlangt, dass Info und Beziehungen programmatisch bestimmbar sind – <figure>/<figcaption> erfüllt dies strukturell.

Häufige Fehler und Best Practices

1. figcaption außerhalb von figure: <figcaption> darf nur als direktes Kind von <figure> stehen. Außerhalb ist es ungültiges HTML. 2. Mehrere figcaptions: Pro <figure> ist nur ein <figcaption> erlaubt. 3. Fehlendes alt bei Bildern: <figcaption> ersetzt NICHT den alt-Text. Beide sind erforderlich: alt für Bildbeschreibung, <figcaption> für Kontext. 4. Dekorative Bilder in figure: Rein dekorative Bilder gehören nicht in ein <figure>. Verwenden Sie alt="" und kein <figcaption>. 5. figure für Layout missbrauchen: <figure> ist für eigenständige Inhalte gedacht, nicht als Layout-Container. 6. aria-label statt figcaption: Bevorzugen Sie sichtbare <figcaption> gegenüber unsichtbarem aria-label – sichtbare Beschriftungen helfen allen Nutzern. Validierung: Der W3C HTML Validator und bf-check erkennen strukturelle Fehler wie <figcaption> außerhalb von <figure> oder fehlende alt-Texte.