Web Accessibility Scan
Was ein Scan auf Ihrer Startseite findet
Links, Schaltflächen, Bilder, Farben: vier Fundstellen einer Startseite.
Befundliste
Dieselbe Startseite, zweimal geprüft
Vier Zeilen aus einem Musterbericht.
Vorher
- a · ohne Linktext
- button · ohne Namen
- img · ohne alt
- p · Kontrast 1,17:1
Das Vorleseprogramm sagt„Link. Schaltfläche. Grafik. Vier Elemente ohne Namen.“
Nachher
- a · „Zu den Öffnungszeiten“
- button · „Menü öffnen“
- img · „Ladenlokal am Markt“
- p · Kontrast 7,1:1
Das Vorleseprogramm sagt„Zu den Öffnungszeiten, Link. Menü öffnen, Schaltfläche.“
Aus dem Prüfbericht
Vier Zeilen, vier Fundstellen
Kritisch Der Pfeil-Link in der Kopfzeile Regel link-name
Ein Link ohne Text steht als leerer Eintrag im Bericht. Der sichtbare Zieltext gehört in den Link.
Kritisch Der Menüknopf ohne Namen Regel button-name
Die drei Striche sind mit aria-hidden ausgeblendet. Ein aria-label macht die Aktion hörbar.
Kritisch Das Titelbild ohne alt Regel image-alt
Ohne alt bleibt der Dateiname übrig. Ein Satz sagt, was das Bild zur Seite beiträgt.
Kritisch Die Bildunterschrift ist zu blass Regel color-contrast
Der Scan misst 1,17:1 gegen den Hintergrund. Normaler Text braucht mindestens 4,5:1.
Zum Mitnehmen
Die vier Fundstellen, korrigiert
Zwei Namen, ein Alt-Text, ein Farbwert.
Korrektur in 3 Schritten ansehen
Link und Menüknopf benennen
Der Linktext nennt das Ziel, aria-label nennt die Aktion. Beides steht im HTML und verändert die Gestaltung nicht.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/oeffnungszeiten"></a> <button class="menue"> <svg aria-hidden="true"><use href="#icon-menue"></use></svg> </button>Nachher
<a href="/oeffnungszeiten">Zu den Öffnungszeiten</a> <button class="menue" aria-label="Menü öffnen"> <svg aria-hidden="true"><use href="#icon-menue"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab durch die Kopfzeile. Jeder Halt hat einen Namen.
Dem Titelbild einen Alt-Text geben
Der Alt-Text sagt, was das Bild zur Seite beiträgt. Der Dateiname tut das nicht.
KorrekturvergleichSchritt 2 · HTML Vorher
<img src="IMG_2087.jpg" class="titelbild">Nachher
<img src="IMG_2087.jpg" class="titelbild" alt="Ladenlokal am Markt mit offener Tür">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder im Browser aus. An der Stelle steht jetzt der Satz.
Die Bildunterschrift lesbar machen
Schrift und Fläche zählen als Paar. Weiß auf demselben Grün erreicht die geforderten 4,5:1.
KorrekturvergleichSchritt 3 · CSS Vorher
.bildunterschrift { color: #58635f; background: #626e69; }Nachher
.bildunterschrift { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Betrachten Sie die Unterschrift aus zwei Metern Abstand. Sie bleibt lesbar.