Alt-Attribute für Bilder (BFSG 9.1.1.1a-c)
Was wird getestet?
Dieses Tool prüft die Alternativtexte von Bildern, SVG-Grafiken und Elementen mit role="img". Es erkennt fehlende, leere oder ungeeignete Alt-Attribute.
Warum ist das wichtig?
Alt-Attribute ermöglichen es Screenreader-Nutzern, den Inhalt und Zweck von Bildern zu verstehen. Fehlende oder schlechte Alt-Texte sind eine der häufigsten Barrieren im Web.
Wie funktioniert der Test?
Das Bookmarklet analysiert alle relevanten Elemente auf der Seite und markiert sie farblich:
- Grün: Barrierefrei
- Orange: Manuelle Prüfung erforderlich
- Rot: Barriere vorhanden
💡 Tipp: Fahre mit der Maus über markierte Bilder, um deren Alt-Text direkt zu sehen!
⚠️ Wichtiger Hinweis
Dieses Tool prüft 23 von 31 möglichen Testfällen automatisch. Die folgenden 8 Aspekte erfordern deine manuelle Prüfung:
- Alt-Text-Qualität: Ist der Text wirklich beschreibend und verständlich?
- Dekorative Berechtigung: Ist alt="" in diesem Kontext gerechtfertigt?
- ARIA-Hidden Berechtigung: Ist das Verstecken vor Screenreadern gerechtfertigt?
- SVG-Zweck: Ist das SVG dekorativ (aria-hidden) oder informativ (title/aria-label)?
- Verlinkte Alt-Texte: "Link", "Hier", "Klick" in verlinkten Bildern
- SVG-Dateien als IMG: <img src="datei.svg"> - title/desc nicht prüfbar
- ARIA-describedby: Zusatzbeschreibungen und komplexe Verweise
- Formular-Kontext: Bilder in Labels und Eingabefeldern
Ziehe diesen Link in deine Lesezeichen oder klicke ihn auf einer beliebigen Website an.
Testfälle
Die folgenden Beispiele zeigen verschiedene Alt-Attribut-Szenarien. Führe das Bookmarklet aus, um die Bewertung zu sehen:
🖼️ Einfache Bilder (standalone)
#1 Beschreibendes Alt-Attribut
<img src="..." alt="Diagramm zeigt Anstieg der Verkaufszahlen um 25% im letzten Quartal">#2 Leeres/Whitespace Alt-Attribut
<img src="..." alt=""> <!-- Leer oder nur Leerzeichen -->#3 Fehlendes Alt-Attribut
<img src="..."> <!-- Kein alt-Attribut! -->#4 Alt-Text-Qualität (manuelle Prüfung)
Ob "Bild" beschreibend genug ist, kann nur manuell bewertet werden.
<img src="..." alt="Bild"> <!-- Qualität manuell prüfen -->🔗 Verlinkte Bilder
#5 Verlinktes Bild mit Ziel-Beschreibung
<a href="products.html"><img src="..." alt="Zur Produktübersicht"></a>#6 Verlinktes Bild ohne Alt-Attribut
<a href="..."><img src="..."></a> <!-- Kein Alt! -->#7 Verlinktes Bild mit leerem Alt
<a href="..."><img src="..." alt=""></a> <!-- Leer ist problematisch bei Links -->🏷️ ARIA-Label Alternativen
#8 ARIA-Label als Alternativtext
<img src="..." aria-label="Umsatzentwicklung 2023: 15% Wachstum">#9 ARIA-Labelledby Referenz (gültig)
Balkendiagramm: Quartalsergebnisse Q1-Q4
<p id="chart-description">Balkendiagramm: Quartalsergebnisse Q1-Q4</p>
<img src="..." aria-labelledby="chart-description">#10 ARIA-Labelledby mit ungültiger ID
<img src="..." aria-labelledby="does-not-exist"> <!-- ID existiert nicht -->🎭 Role-Attribute
#11 Role="presentation" ohne Alt
<img src="..." role="presentation">#18 Role="presentation" MIT Alt (Widerspruch)
<img src="..." role="presentation" alt="Dekorbild"> <!-- Widerspruch! -->#12 DIV mit role="img" und ARIA-Label
<div role="img" aria-label="Fortschrittsbalken: 75% abgeschlossen">
<div style="width: 75%; ..."></div>
</div>#13 DIV mit role="img" ohne Namen
<div role="img">...</div> <!-- Kein aria-label oder aria-labelledby -->🎨 SVG-Grafiken
#14 Inline SVG mit title-Element
<svg>
<title>Kreisdiagramm zeigt 60% Marktanteil</title>
<circle cx="50" cy="50" r="40" fill="#fd7e14"/>
</svg>#15 Inline SVG ohne title
<svg>
<rect width="100" height="100" fill="#6c757d"/>
</svg> <!-- Kein title-Element -->#19 SVG mit title UND desc
<svg>
<title>Kreisdiagramm Marktanteile</title>
<desc>Zeigt 60% eigener Marktanteil, 40% Konkurrenz</desc>
<circle cx="50" cy="50" r="40" fill="#fd7e14"/>
</svg>🔧 role="presentation" Edge Cases
#22 SVG mit role="presentation"
Bei SVG ist aria-hidden="true" zuverlässiger als role="presentation".
<svg role="presentation">
<circle cx="50" cy="50" r="40" fill="#6c757d"/>
</svg> <!-- aria-hidden bevorzugt -->#23 role="presentation" + aria-label (Konflikt)
Widerspruch: role="presentation" wird durch aria-label ignoriert.
<img role="presentation" aria-label="Wichtige Information">
<!-- Konflikt! Browser ignoriert role="presentation" -->#24 SVG mit aria-hidden="true"
Manuelle Prüfung: Ist das Verstecken vor Screenreadern gerechtfertigt?
<svg aria-hidden="true"> <!-- Wirklich dekorativ? -->#25 aria-labelledby + role="presentation" (Konflikt)
Diagramm mit Konflikten
aria-labelledby macht role="presentation" unwirksam.
<p id="conflict-desc">Diagramm mit Konflikten</p>
<img role="presentation" aria-labelledby="conflict-desc">
<!-- Widerspruch! -->👁️ ARIA-Hidden Bilder
#20 ARIA-Hidden ohne Alt
Manuelle Prüfung: Ist das Verstecken vor Screenreadern gerechtfertigt?
<img src="..." aria-hidden="true"> <!-- Wirklich dekorativ? -->#21 ARIA-Hidden mit Alt (Widerspruch)
Manuelle Prüfung: Warum ist das Element versteckt obwohl es Alt-Text hat?
<img src="..." aria-hidden="true" alt="..."> <!-- Warum versteckt? -->⚠️ Problematische Kombinationen
#16 Alt + ARIA-Labelledby (Redundanz)
Diagrammbeschreibung
<img src="..." alt="Diagramm mit Daten" aria-labelledby="redundant-desc">
<!-- ARIA-Labelledby überschreibt Alt-Attribut -->#17 Bild in Figure ohne Alt
<figure>
<img src="..."> <!-- Kein Alt, aber figcaption vorhanden -->
<figcaption>Bildunterschrift ist vorhanden</figcaption>
</figure>Bookmarklet-Code
Kopiere den Code unten, um das Bookmarklet manuell zu erstellen:
Legende
Testanleitung
1. Bookmarklet ausführen
2. "Testergebnis"-Boxen füllen sich farblich
3. Vergleiche mit "Erwartung"
4. Detailbericht im Overlay studieren