Website Accessibility Scan
Von der URL zur Fundstelle
Felder, Bilder, Farben, Links: vier Fundstellen aus einem Durchlauf.
Hör-Test
So klingt die geprüfte Seite
Dieselbe Seite, vor und nach der Korrektur.
Ohne Namen bleibt jedes Element bei seiner Rolle. Der Bericht listet genau diese Stellen.
Jedes Element nennt seinen Zweck. Der zweite Lauf meldet diese Stellen nicht mehr.
Aus dem Prüfbericht
Vier Fundstellen aus einem Lauf
Kritisch Das Feld im Anmeldeformular Regel label
Der Platzhalter im Feld ist kein Name. Ein label mit for verbindet den sichtbaren Text mit dem Feld.
Kritisch Bilder ohne Alternativtext Regel image-alt
Fehlt alt, bleibt der Dateiname übrig. Jedes img bekommt alt, dekorative Bilder ein leeres.
Kritisch Blasser Text auf farbiger Fläche Regel color-contrast
Der Lauf misst das Verhältnis von Schrift zu Fläche. Normaler Text braucht mindestens 4,5:1.
Kritisch Links ohne Text im Bericht Regel link-name
Ein Bild- oder Pfeil-Link ohne Wort steht als leerer Eintrag im Bericht. Der Text nennt das Ziel.
Zum Mitnehmen
Die Fundstellen, korrigiert
Eine Beschriftung, ein Alt-Text, ein Linktext, ein Farbwert.
Korrektur in 3 Schritten ansehen
Feld beschriften, Bild beschreiben
Das label bleibt beim Tippen stehen. Der Alt-Text sagt, was das Bild beiträgt. Beides steht im HTML.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="text" name="plz" placeholder="Postleitzahl"> <img src="kursraum.jpg">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" type="text" name="plz" placeholder="z. B. 10115"> <img src="kursraum.jpg" alt="Kursraum mit Stuhlkreis und Flipchart">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Postleitzahl“ und blenden Sie Bilder aus. Beides hat jetzt einen Text.
Den Link sein Ziel nennen lassen
Ein Pfeil ist kein Linktext. Steht das Ziel im Link, findet es auch die Linkliste eines Vorleseprogramms.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/kursplan"><img src="pfeil.svg" alt=""></a>Nachher
<a href="/kursplan">Zum Kursplan</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste. Der Eintrag heißt jetzt „Zum Kursplan“.
Den blassen Text anheben
Schrift und Fläche zählen gemeinsam. Ein dunklerer Ton bringt den Text über 4,5:1, ohne die Fläche zu ändern.
KorrekturvergleichSchritt 3 · CSS Vorher
.kurs-info { color: #8a9a94; background: #f2f4f3; }Nachher
.kurs-info { color: #3d514a; background: #f2f4f3; }Markierte Zeilen wurden geändert
So prüfen Sie es Schauen Sie bei Tageslicht auf den Text. Er bleibt lesbar.