figure & figcaption richtig nutzen

<figure> fasst einen eigenständigen Inhalt zusammen, auf den der Fließtext Bezug nimmt – ein Bild, ein Diagramm, ein Codeblock, ein Zitat –, und <figcaption> beschriftet ihn sichtbar für alle. Die Beschriftung ersetzt dabei nicht das alt-Attribut: Das alt beschreibt, was zu sehen ist, die figcaption ordnet ein, was es bedeutet.

Das Wichtigste in Kürze

• <figure> ist für referenzierten, in sich geschlossenen Inhalt gedacht – er ließe sich an eine andere Stelle verschieben, ohne den Lesefluss zu zerreißen.
• <figcaption> muss erstes oder letztes Kind von <figure> sein. Nur die erste <figcaption> gilt als Beschriftung.
• Die <figcaption> liefert den zugänglichen Namen der <figure>. Screenreader sagen „Abbildung“ plus diesen Namen an.
• alt und figcaption sind zwei Texte mit zwei Aufgaben. Steht in beiden derselbe Satz, hört ein Screenreader ihn zweimal.
• Nicht nur für Bilder: Code, Tabellen, Videos, Zitate und mehrere Bilder in einer Gruppe passen ebenso.
• <figure> hat die Rolle figure, <figcaption> hat keine eigene Rolle – sie geht im Namen der Abbildung auf.
• Ein dekoratives Icon im Text braucht keine <figure>; dort genügt <img alt="">.
• WCAG-Bezug: 1.1.1 Nicht-Text-Inhalte (Stufe A) fordert die Textalternative – das ist das alt, nicht die Beschriftung.

Der Aufbau

<figure> umschließt den Inhalt, <figcaption> beschriftet ihn:

<figure>
  <img
    src="/img/kontrast-beispiel.webp"
    alt="Zwei Farbpaare nebeneinander: links weiße Schrift auf dunklem Grau, rechts hellgraue Schrift auf hellem Grau."
    width="800"
    height="450"
  />
  <figcaption>Abb. 1: Links 14,2:1, rechts 1,4:1 – dasselbe Layout, ein Kontrastverhältnis auseinander.</figcaption>
</figure>

Die Beschriftung ist damit eindeutig mit dem Inhalt verknüpft – sichtbar für alle und für Screenreader als zusammengehörig erkennbar. Ohne <figure> wäre eine Bildunterschrift nur ein Absatz, der zufällig darunter steht.

Erstes oder letztes Kind – und nichts dazwischen

Der HTML-Standard lässt für den Inhalt einer <figure> genau drei Varianten zu:

1. eine <figcaption>, danach beliebiger Inhalt,
2. beliebiger Inhalt, danach eine <figcaption>,
3. Inhalt ohne Beschriftung.

<!-- Erlaubt: Beschriftung oben -->
<figure>
  <figcaption>Abb. 2: Der Prüfablauf im Überblick.</figcaption>
  <img src="/img/ablauf.webp" alt="…" width="800" height="400" />
</figure>

<!-- Erlaubt: Beschriftung unten (der übliche Fall) -->
<figure>
  <img src="/img/ablauf.webp" alt="…" width="800" height="400" />
  <figcaption>Abb. 2: Der Prüfablauf im Überblick.</figcaption>
</figure>

<!-- Ungültig: Beschriftung in der Mitte -->
<figure>
  <img src="/img/a.webp" alt="…" width="400" height="300" />
  <figcaption>Zwei Varianten</figcaption>
  <img src="/img/b.webp" alt="…" width="400" height="300" />
</figure>

Die dritte Variante ist der Fehler, der am häufigsten durchrutscht, weil er im Browser genau so aussieht wie gewollt. Der W3C-Validator meldet ihn zuverlässig.

alt und figcaption: zwei Texte, zwei Aufgaben

Das ist der Punkt, an dem die meisten Seiten schwächer sind als nötig – und der Grund, warum diese Seite dafür eine eigene Abbildung hat.

Die Aufteilung in einem Satz:

• Das alt beschreibt den Bildinhalt für Menschen, die das Bild nicht sehen. Bei einem Diagramm gehören die Werte hinein, nicht der Hinweis „Diagramm“.
• Die <figcaption> ist eine sichtbare Bildunterschrift für alle – mit Abbildungsnummer, Quelle, Einordnung, Stichprobengröße.

Beide dürfen und sollen nebeneinander existieren. Was sie nicht dürfen: sich wörtlich wiederholen. Da die <figcaption> den zugänglichen Namen der Abbildung liefert und das alt als Inhalt vorgelesen wird, hört man einen doppelten Text tatsächlich doppelt. Wie ein guter Alternativtext entsteht, steht unter Alt-Texte richtig schreiben.

Ein häufiger Reflex ist, das alt dann leer zu lassen – „die Beschriftung steht ja darunter“. Davon würd ich abraten: Die Beschriftung erklärt in aller Regel nicht, was auf dem Bild zu sehen ist. Wer die Abbildung nicht sehen kann, bekommt sonst nur „Abb. 3“ und eine Einordnung, aber nicht die Daten.

Mehr als nur Bilder

<figure> ist nicht auf Bilder beschränkt. Es passt überall, wo ein referenzierter, in sich geschlossener Inhalt eine Beschriftung verdient.

Codebeispiel:

<figure>
  <pre><code>const summe = (a, b) =&gt; a + b;</code></pre>
  <figcaption>Beispiel 1: eine einfache Pfeilfunktion.</figcaption>
</figure>

Zitat mit Quellenangabe – hier ergänzen sich <figure>, <blockquote> und <cite>:

<figure>
  <blockquote cite="https://www.w3.org/TR/WCAG22/">
    <p>Content can be presented in different ways without losing information or structure.</p>
  </blockquote>
  <figcaption>— <cite>Web Content Accessibility Guidelines 2.2</cite>, Prinzip 1: Wahrnehmbar</figcaption>
</figure>

Die Abgrenzung zwischen den drei Elementen klärt Zitate richtig auszeichnen.

Mehrere Bilder in einer Gruppe – erlaubt, solange nur eine Beschriftung vorhanden ist und sie am Anfang oder Ende steht:

<figure>
  <img src="/img/vorher.webp" alt="Formular mit Fehlermeldung nur in Rot." width="400" height="300" />
  <img src="/img/nachher.webp" alt="Dasselbe Formular mit Symbol, Text und Verweis auf das Feld." width="400" height="300" />
  <figcaption>Abb. 4: Vorher und nachher – Farbe allein reicht nicht.</figcaption>
</figure>

Tabelle – wenn sie als Abbildung referenziert wird. Ein Sonderfall, denn Tabellen haben mit <caption> schon eine eigene Beschriftung; die <figure> ist nur dann sinnvoll, wenn du eine Abbildungsnummer und Quelle außerhalb der Tabelle brauchst. Wie eine Datentabelle intern aufgebaut wird, steht unter Tabellen semantisch aufbauen.

Das Kennzeichen ist immer dasselbe: Der Inhalt wird aus dem Fließtext referenziert („siehe Beispiel 1“) und ließe sich verschieben, ohne dass der Text unverständlich wird.

Was Screenreader daraus machen

<figure> hat die Rolle figure, <figcaption> hat keine eigene Rolle – ihr Text wird zum zugänglichen Namen der Abbildung. Praktisch bedeutet das:

• Beim Betreten wird „Abbildung“ plus der Text der <figcaption> angesagt, danach folgt der Inhalt mit seinem alt.
• In der Elementliste erscheinen Abbildungen als eigene Kategorie; man kann sie direkt anspringen.
• Ohne <figcaption> bleibt die Abbildung namenlos – dann trägt allein das alt die Information.

Ein Detail, das man kennen sollte: Wenn die <figure> ein aria-label oder aria-labelledby bekommt, überschreibt das die <figcaption> als Namen. Das ist selten gewollt und praktisch immer ein Fehler. Nachvollziehen lässt sich das mit NVDA oder VoiceOver in einer Minute.

Wann besser kein figure?

Nicht jedes Bild braucht eine <figure>. Drei Fälle, in denen es überflüssig oder schädlich ist:

• Dekorative Bilder und Icons. Ein Trennsymbol, ein Hintergrundmuster, ein Icon neben einem Link – hier genügt <img alt=""> oder ein CSS-Hintergrund. Eine <figure> würde eine Abbildung ankündigen, die keine ist. Mehr dazu unter Icons & SVGs.
• Bilder ohne Beschriftung und ohne Bezug. Ein Aufmacherbild oben im Artikel ist Illustration, keine referenzierte Abbildung. Ein schlichtes <img> reicht.
• Layout-Bilder. Produktfotos in einem Raster, Avatare in einer Kommentarliste, Logos in einer Referenzleiste – das sind Bestandteile von Listen oder Karten, keine Abbildungen.

Die Kurzform: <figure> lohnt, sobald der Inhalt eine Beschriftung trägt und für sich steht. Alles andere ist ein <img>.

Randnotiz – Bildunterschriften werden gelesen. Bildunterschriften gehören zu den meistgelesenen Textbausteinen einer Seite, und Suchmaschinen werten sie mit aus. Eine <figcaption> ist damit auch ein Beitrag zum Bild-SEO – sie erklärt das Bild im Kontext, statt es nur zu zeigen. Für KI-Systeme kommt ein zweiter Effekt hinzu: Eine Abbildung mit Nummer, Beschriftung und Quellenangabe ist eine zitierfähige Einheit; ein Bild ohne beides ist nur eine Datei.

Gestalten mit CSS

Browser geben <figure> standardmäßig einen Außenabstand von 1em oben und unten sowie 40px links und rechts. Das ist der Grund, warum Abbildungen manchmal eingerückt wirken, ohne dass es im eigenen CSS steht:

figure {
  margin: 0; /* Standardeinrückung entfernen */
}

figure img,
figure svg {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: #5a6473;
  line-height: 1.5;
}

Zwei Hinweise aus der Praxis: display: block am Bild verhindert den Spalt unter dem Bild, der aus der Grundlinienausrichtung von Inline-Elementen entsteht. Und width und height am <img> bleiben trotz responsiver Skalierung wichtig – sie reservieren das Seitenverhältnis und verhindern das Nachrücken des Layouts beim Laden, was direkt in die Core Web Vitals einzahlt.

Für responsive Abbildungen kommt srcset hinzu:

<figure>
  <img
    src="/img/ablauf-830.webp"
    srcset="/img/ablauf-830.webp 830w, /img/ablauf-1660.webp 1660w"
    sizes="(min-width: 56rem) 830px, calc(100vw - 2.5rem)"
    alt="…"
    width="830"
    height="400"
    loading="lazy"
    decoding="async"
  />
  <figcaption>Abb. 5: derselbe Inhalt in zwei Auflösungen.</figcaption>
</figure>

Häufiger Fehler in der Praxis

Der Fehler, der mir in Redaktionssystemen am häufigsten begegnet: die Beschriftung wird zur Textalternative umgewidmet. Das Eingabefeld heißt „Bildunterschrift“, der Text landet in der <figcaption>, und weil das Feld für den Alternativtext leer bleibt, setzt das System alt="". Ergebnis: Ein informatives Diagramm gilt als dekoratives Bild, und die Beschriftung „Abb. 3: Die Werte im Zeitverlauf“ ist alles, was ankommt.

Umgekehrt kommt es auch vor – derselbe Satz in beiden Feldern, weil das Redaktionssystem das „zur Sicherheit“ kopiert. Dann liest der Screenreader ihn zweimal hintereinander. Beides fällt in automatischen Prüfungen nicht auf, weil formal ein alt vorhanden ist.

Der Prüfschritt dauert zehn Sekunden: Deck das Bild mit der Hand ab und lies nur alt und figcaption. Verstehst du, was auf dem Bild zu sehen war? Und steht dabei nichts zweimal?

Häufige Fehler

• <figure> für jedes Layout-Bild, auch ohne Beschriftung und ohne Bezug im Text.
• <figcaption> als Ersatz fürs alt – beide haben verschiedene Aufgaben.
• alt="" bei informativen Bildern, weil eine Beschriftung vorhanden ist.
• Derselbe Text in alt und figcaption – der Screenreader liest ihn doppelt.
• Beschriftung als loser <p> neben dem Bild statt als <figcaption> darin.
• <figcaption> in der Mitte der <figure> – erlaubt sind nur erstes oder letztes Kind.
• Mehrere <figcaption> in einer <figure>; nur die erste zählt.
• aria-label an der <figure> – es überschreibt die sichtbare Beschriftung als Namen.
• Deko-Bild in <figure>, wo <img alt=""> gereicht hätte.
• width/height weglassen – das Layout rückt beim Laden nach.

Häufige Fragen

Muss eine figure immer ein Bild enthalten?

Nein. Code, Diagramme, Tabellen, Videos oder Zitate sind genauso passend. Entscheidend ist der referenzierte, eigenständige Charakter – nicht die Art des Inhalts. Auch mehrere Bilder in einer Gruppe sind erlaubt, solange nur eine Beschriftung vorhanden ist.

Oben oder unten – wohin mit der figcaption?

Beides ist erlaubt; sie muss das erste oder letzte Kind sein. Üblich und erwartbar ist die Beschriftung unter dem Inhalt. In der Mitte ist sie ungültig, selbst wenn das Ergebnis im Browser richtig aussieht.

Brauche ich dann noch ein alt am Bild?

Ja. Die <figcaption> ersetzt den Alternativtext nicht – sie liefert den Namen der Abbildung, das alt ihren Inhalt. Nur wenn das Bild rein dekorativ ist, gehört ein leeres alt="" hin; dann ist allerdings meist auch die <figure> unnötig.

Darf HTML in der figcaption stehen?

Ja, <figcaption> nimmt Fließinhalt auf: Links, <cite>, <strong>, <code>, sogar Absätze. Eine Quellenangabe als Link ist der häufigste sinnvolle Einsatz. Übertreiben sollte man es nicht – eine Beschriftung mit drei Absätzen ist keine Beschriftung mehr.

Wie zähle ich Abbildungen automatisch?

Über CSS-Zähler, ohne die Nummern in den Text zu schreiben. Ein counter-reset am <article>, ein counter-increment an figure und content: "Abb. " counter(abb) ": " am figcaption::before. Vorsicht dabei: Generierte Inhalte werden von manchen Screenreadern nicht vorgelesen. Wenn die Nummer inhaltlich wichtig ist – weil der Text auf „Abb. 3“ verweist –, schreib sie ins Markup.

Verwandte Themen

• Alt-Texte richtig schreiben – die andere Hälfte der Aufgabe
• Zitate richtig auszeichnen – <figure> um <blockquote> und <cite>
• 1.1.1 Nicht-Text-Inhalte – das Kriterium hinter der Textalternative
• Bild-SEO – was Beschriftung, Dateiname und Format bewirken
• Semantische Medien – <audio>, <video> und <track> in einer <figure>
• Icons & SVGs – wann ein Bild dekorativ ist

Quellen

• 4.4.12 The figure element (WHATWG HTML Standard – Inhaltsmodell und die Regel, dass figcaption erstes oder letztes Kind sein muss)
• <figcaption>: Das Figure-Caption-Element (MDN Web Docs – die figcaption als zugänglicher Name der figure)
• Images Tutorial (W3C Web Accessibility Initiative – Entscheidungsbaum informativ, dekorativ, komplex)
• The WebAIM Million (WebAIM, Februar 2026 – 53,1 % der Startseiten mit mindestens einem Bild ohne Alternativtext)