Über Entwickler-Tools
Der schnellste Weg, um einen Alt-Text zu prüfen, geht über die Entwickler-Konsole.
Damit kannst du den Code inspizieren und dir das gesetzte Alt-Attribut ansehen.
Um Alt-Texte in den Entwicklertools zu prüfen, gehe wie folgt vor:
In Google Chrome
- Drücke auf deiner Tastatur F12 oder Strg + Shift + I (Windows/Linux) bzw. Cmd + Option + I (Mac).
- Alternativ kannst du mit der rechten Maustaste auf eine Seite klicken und **„**Untersuchen“ auswählen.
- Die Entwicklertools erscheinen dann meist am unteren oder rechten Rand des Browserfensters
- Wähle nun das Bild aus. In der Entwicklerkonsole kannst du den Code inspizieren
- Kontrolliere im Code den Alt-Text. In dem Beispiel sieht man: alt=’Mein Namens-Badge Maja Benke neben dem Tisch-Badge „Accessibility“’
In Mozilla Firefox
- Drücke F12 oder Strg + Shift + I (Windows/Linux) bzw. Cmd + Option + I (Mac).
- Auch hier kannst du mit der rechten Maustaste auf die Seite klicken und „Element untersuchen“ wählen.
- Danach öffnet sich die Werkzeugleiste mit dem Inspektor, der Konsole und weiteren Tools.
- Wähle nun das Bild aus. In der Entwicklerkonsole kannst du den Code inspizieren
- Kontrolliere im Code den Alt-Text. In dem Beispiel sieht man: alt=’Mein Namens-Badge Maja Benke neben dem Tisch-Badge „Accessiblity“’
Über das Tool “Wave”
Die Browser-Extension “Wave” ist ein starkes Prüftool für die Barrierefreiheit und ich nutze es für viele Prüfschritte, unter anderem auch, um Alt-Texte auf Webseiten zu prüfen.
Der große Vorteil ist, dass die Alt-Texte direkt unter den Bildern angezeigt werden und sie sich somit leichter prüfen lassen, ob sie zu den Bildern passen, was ich übersichtlicher finde als über die Entwicklerkonsole.
Um mit Wave die Alt-Texte zu testen gehe wie folgt vor:
- Installier zunächst die Browser-Extension Wave
- Lasse deine Prüfung auf der Webseite laufen, indem du auf das Wave-Symbol in der Browser-Leiste klickst
- Wähle nun den Tab “Details” aus
- In den Bereichen “Error”, “Alerts” und “Features” findest du nun Informationen zu Alt-Texten.
- Für eine bessere Übersicht, kannst du alle anderen Bereiche deaktivieren, indem du das Häkchen rausnimmst
- Die Alt-Texte werden nun in grün unter den Bildern angezeigt, falls vorhanden
- Nun kannst du die Alt-Texte kontrollieren
Eine ausführliche Erklärung über passende Alt-Texte gibt es in meinem Beitrag „So schreibst du gute Alt-Texte – aus Sicht eines Blinden“.
Prüfen auf Barrierefreiheit – Mein Angebot
Du bist unsicher, ob deine Website barrierefrei ist oder möchtest eine professionelle Prüfung?
Ich unterstütze dich gerne mit einer professionellen Prüfung deiner Website und gebe dir konkrete Handlungsempfehlungen.
Zu meinem Angebot zur Barrierefreiheits-Prüfung.
