mitmario.dev

Abschnitt 5 · Lektion 3

Figuren und Bildunterschriften

HTML Im Browser 2 Min Lesezeit 3 BeispieleLektion 3 von 5

Ein Bild kommt selten allein. Meistens steht eine Bildunterschrift dabei, und die soll erkennbar zum Bild gehören und nicht zufällig darunter stehen.

figure und figcaption

Bild mit Unterschrift 
<figure>
  <img
    src="/lernen/media/demo-600.jpg"
    alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
    width="600"
    height="338"
  >
  <figcaption>Abbildung 1: Das Demobild in der kleinen Variante.</figcaption>
</figure>

figure ist die Klammer um ein Medium und seine Beschriftung. figcaption ist die Beschriftung selbst und steht als erstes oder letztes Kind im figure, je nachdem, ob die Unterschrift oben oder unten stehen soll. Dazwischen ist sie nicht erlaubt, und mehr als eine gibt es pro figure auch nicht.

Was zwischen den beiden liegt, ist offen: ein Bild, mehrere Bilder, ein Video, ein Codeblock. Die figure sagt nur, dass dieser Inhalt und diese Beschriftung zusammengehören.

Jetzt der Vergleich ohne die beiden Elemente:

Ohne figure, nur zwei Elemente 
<img
  src="/lernen/media/demo-600.jpg"
  alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
  width="600"
  height="338"
>
<p>Abbildung 1: Das Demobild in der kleinen Variante.</p>

Auf der Seite sieht das fast gleich aus. Der Unterschied liegt wieder in der Verbindung: Im ersten Fall weiß der Browser, dass der Text zum Bild gehört. Ein Screenreader kündigt eine Abbildung an und liest die Beschriftung dazu. Im zweiten Fall stehen dort ein Bild und danach ein beliebiger Absatz, und wer nicht sieht, dass sie zusammengehören, erfährt es nicht.

alt und figcaption sagen Verschiedenes

Der häufigste Fehler ist, in beiden dasselbe zu schreiben. Dann hört ein Screenreader-Nutzer den Text zweimal hintereinander.

Die Aufteilung ist einfach:

  • alt beschreibt, was zu sehen ist. Es ersetzt das Bild für alle, die es nicht sehen.
  • figcaption sagt, was man dazu wissen soll. Sie steht für alle da, auch für Sehende: eine Nummer, eine Quelle, eine Einordnung, ein Copyright.

Beispiel: alt lautet „Ein Teller Linsensuppe mit Petersilie“, die figcaption lautet „Abbildung 3: Die Suppe nach 30 Minuten Kochzeit“. Beide zusammen ergeben das vollständige Bild, keiner wiederholt den anderen.

Und noch eine Konsequenz daraus: Ein Bild mit figcaption ist nie Deko. Ein leeres alt wäre hier also falsch.

Nicht nur für Bilder

Auch für Zitate und Code 
<figure>
  <blockquote>
    <p>Erst denken, dann tippen.</p>
  </blockquote>
  <figcaption>Aus dem <cite>Handbuch für Anfänger</cite></figcaption>
</figure>

Der Name führt in die Irre. figure steht für jeden eigenständigen Inhalt, auf den man sich im Text beziehen könnte: Diagramme, Tabellen, Code-Beispiele, Zitate, Videos.

Das Merkmal ist die Verschiebbarkeit. Könnte man den Block an eine andere Stelle der Seite oder in einen Anhang schieben, ohne dass der Text unverständlich wird? Dann ist es eine figure. Genau deshalb heißt es in Büchern „siehe Abbildung 3“ und nicht „siehe das Bild da oben“.

Ein Bild mitten im Textfluss, das einfach dazugehört, braucht dagegen kein figure. Ein img allein ist völlig in Ordnung.

Zum Mitnehmen

alt beschreibt, was zu sehen ist. figcaption sagt, was man dazu wissen soll. Beide dasselbe zu schreiben, heißt für Screenreader-Nutzer alles doppelt zu hören.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.