Bildunterschrift im HTML
Unterschrift und Alt-Text sagen Verschiedenes
figure, figcaption, alt: drei Stellen rund um ein Bild.
Bildtext mit System
Drei Bilder zeigen, welcher Text wohin gehört
Alt-Text ersetzt die relevante Bildinformation. Die Unterschrift ordnet sie ein.
Foto
Diagramm
Screenshot
Dasselbe Bild · drei Textebenen
Kein Text muss alles leisten
Ersetzt die relevante visuelle Information, wenn das Bild nicht verfügbar ist.
Was geht ohne das Bild verloren?Bleibt für alle sichtbar und ordnet die gesamte Abbildung in den Beitrag ein.
Warum steht die Abbildung genau hier?Trägt Details, Werte und Schlussfolgerungen, die einen kurzen Alt-Text überladen würden.
Welche Details müssen überprüfbar bleiben?Vollständiges Grundmuster
Foto, Alt-Text, Kontext und Quelle
figcaption ist das erste oder letzte Kind von figure. Hier steht es am Ende. Der Alt-Text wiederholt weder Ort noch Quelle.
<figure class="bild">
<img
src="/bilder/segelboote.jpg"
width="1200"
height="800"
alt="Drei Segelboote liegen vor einem Holzsteg.">
<figcaption>
Blick vom Nordufer am frühen Morgen.
<span class="quelle">Foto: Redaktion, eigene Aufnahme</span>
</figcaption>
</figure>
<style>
.bild {
margin: 2rem 0;
}
.bild img {
display: block;
max-width: 100%;
height: auto;
}
.bild figcaption {
margin-top: 0.75rem;
line-height: 1.5;
}
.quelle {
display: block;
}
</style>Verlässliche Referenzen
So prüfen Sie es
- Blenden Sie das Bild aus. Der Alt-Text muss die fehlende Information ersetzen.
- Lesen Sie Alt-Text und Bildunterschrift direkt hintereinander. Streichen Sie Wiederholungen.
- Prüfen Sie im HTML, ob
figcaptiondas erste oder letzte Kind vonfigureist. - Prüfen Sie bei Diagrammen, ob Werte und Aussagen auch als zugänglicher Text vorliegen.
Aus dem Prüfbericht
Zwei Befunde am selben Bild
Kritisch Das Bild über der Unterschrift hat kein alt Regel image-alt
Ohne alt liest das Programm den Dateinamen vor. Die Bildunterschrift ersetzt den Alternativtext nicht, sie steht daneben.
Kritisch Das verlinkte Bild ohne Linktext Regel link-name
Führt das Bild in die Galerie, braucht der Link einen Namen. Dann nennt der Alt-Text das Ziel statt des Motivs.
Zum Mitnehmen
Bild und Unterschrift, korrigiert
Ein figure, zwei Texte mit verschiedenen Aufgaben.
Korrektur in 2 Schritten ansehen
Alt-Text und Unterschrift trennen
Der Alt-Text beschreibt das Motiv, die Bildunterschrift ordnet es ein. Beide wiederholen einander nicht.
KorrekturvergleichSchritt 1 · HTML Vorher
<figure> <img src="DSC_2043.jpg"> <figcaption>Blick vom Nordufer, 1928</figcaption> </figure>Nachher
<figure> <img src="DSC_2043.jpg" alt="Segelboote vor dem hölzernen Steg"> <figcaption>Blick vom Nordufer, 1928</figcaption> </figure>Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder im Browser aus. Alt-Text und Unterschrift ergeben zusammen einen Sinn.
Dem Bildlink sein Ziel geben
Ist das Bild der ganze Link, wird sein Alt-Text zum Linktext. Er nennt das Ziel, nicht noch einmal das Motiv.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/galerie/1928"> <img src="DSC_2043.jpg" alt="Segelboote vor dem hölzernen Steg"> </a>Nachher
<a href="/galerie/1928"> <img src="DSC_2043.jpg" alt="Zur Galerie Nordufer 1928"> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Der Eintrag nennt die Galerie.