HTML-Kurs / Bilder und Beschriftungen mit figure und figcaption verbinden

figure fasst eigenständige Inhalte wie ein Bild, eine Grafik oder ein Codebeispiel zusammen, und figcaption gibt dieser Figur eine sichtbare Beschriftung. Nicht alle Bilder benötigen diese Elemente. Verwenden Sie sie, wenn der Inhalt und seine Erklärung zusammen eine Einheit bilden.

Halten Sie ein Bild und seine Beschriftung zusammen

Ein Reisebild und dessen Standort oder Kontext können eine Figur bilden. Platzieren Sie figcaption als erstes oder letztes Kind von figure. Verwenden Sie dasselbe herunterladbare Bildbeispiel und die Pfadkonfiguration wie Bilder mit img einfügen: Alternativtext und Abmessungen.

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Ein Baum auf einer kleinen Insel in der Mitte eines Sees, mit Bergen im Hintergrund"
       width="960" height="540">
  <figcaption>Abbildung: der See und der Baum, die in dieser Lektion verwendet werden</figcaption>
</figure>

Wenn das Bild die Inhaltsbreite überschreitet, fügen Sie dieses CSS in das Style-Element des Head ein. Das Ändern der Bildunterschrift ändert nicht automatisch den alternativen Text, prüfen Sie also jeden unabhängig voneinander.

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

Laden Sie das Beispielbild mit 960 Pixeln Breite herunter und speichern Sie es neben der HTML-Datei. Fügen Sie den folgenden HTML-Code im body und die CSS-Regeln in einem style-Element im head ein. Der Dateiname lautet html-image-sample-lake-tree-960-v1.webp und die tatsächliche Größe beträgt 960×540 Pixel. Die Beschriftung erscheint darunter; verschieben Sie figcaption an die Position des ersten Kindes, um sie nach oben zu setzen.

Der alternative Text und die Beschriftungen haben unterschiedliche Funktionen

Der Text alt übermittelt die Informationen oder die Funktion des Bildes, wenn dieses nicht wahrgenommen werden kann. Der sichtbare figcaption liefert einen Titel, eine Quelle oder einen Kontext für alle. Dasselbe genau in beiden zu wiederholen, kann zu einer redundanten Leseerfahrung führen. In diesem Beispiel beschreibt das Alt-Attribut die sichtbare Information und die Bildunterschrift identifiziert ihre Rolle als Beispiel für eine Lektion. Untersuchen Sie die Funktion des Bildes gleichzeitig mit der Verwendung der Tastatur in Grundprinzipien der Barrierefreiheit: Überschriften, Links, Bilder und Tastatur.

Für ein rein dekoratives Bild ziehen Sie alt="" in Betracht, stellen Sie jedoch zunächst sicher, dass die wichtigen Informationen an anderer Stelle verfügbar sind. Eine Grafik sollte ihren Haupttrend oder ihr Ergebnis vermitteln und nicht nur die Bezeichnung „Balkendiagramm“. Wenn ihre Daten eine längere Erklärung erfordern, stellen Sie diese in einem Text oder einer Tabelle in der Nähe bereit und lassen Sie den alternativen Text die Leser darauf hinweisen. Der Entscheidungsbaum W3C WAI für alternativen Text hilft bei dieser Wahl.

Wann kann man figure weglassen?

Ein gewöhnliches Bild im Fluss eines Absatzes benötigt kein figure, wenn es keine separate Beschriftung oder Referenz hat. Ein Diagramm, das als „die folgende Abbildung“ besprochen wird, oder ein Codebeispiel mit Beschriftung, ist ein geeigneterer Kandidat. Eine figure kann mehr als ein Bild enthalten. Siehe die Referenz zu figure auf MDN für ihr Inhaltsmodell.

Um eine Quelle in der Beschriftung zu verlinken, ersetzen Sie das vorherige figcaption wie folgt. Dieser Link führt zur Lektion, die die tatsächliche Beispieldatei bereitstellt. Für ein anderes Bild, identifizieren Sie dessen tatsächlichen Urheber/Quelle und überprüfen Sie die Nutzungsbedingungen; die einfache Nennung gibt keine Erlaubnis.

<figcaption>Quelle des Beispielbildes: <a href="https://www.codingfactory.net/de/18374">die in der Lektion zu Bildern bereitgestellte Datei</a>.</figcaption>

Die Quellenangabe und der Link erscheinen unter dem Bild, während das Alt-Attribut weiterhin den Baum, den See und die Berge beschreibt. Wiederholen Sie nicht alle Details der Attribution im Alt-Text.

Wenn das Ergebnis falsch erscheint

Browser können standardmäßig Ränder um figure hinzufügen. Überprüfen Sie dessen CSS margin, bevor Sie die HTML-Struktur ändern. Wenn das Bild fehlt, überprüfen Sie den Dateinamen und den relativen Pfad. Wenn die Bildunterschrift fehlt, stellen Sie sicher, dass figcaption innerhalb von figure ist und die Schlusstags vorhanden sind. Eine Bildunterschrift liefert nicht automatisch einen geeigneten alternativen Text; überprüfen Sie beide separat.