Schnelltest Barrierefreiheit
Die meisten Barrieren sind Kleinigkeiten, die im HTML fehlen, etwa ein Bild ohne Beschreibung oder ein Feld ohne Namen. Dieser Test ruft eine Seite ab, findet sie und sagt Ihnen, welche Elemente Sie korrigieren müssen.
Alles auf einer Seite braucht einen Namen
Wenn Sie eine Seite ansehen, leistet das Layout viel, ohne ein Wort zu sagen. Ein Lupensymbol neben einem Feld bedeutet „hier suchen“. Großer fetter Text bedeutet „ein neuer Abschnitt beginnt“. Nichts davon erreicht jemanden, der einen Screenreader, eine Braillezeile oder Sprachsteuerung nutzt. Deren Software sieht das Layout nicht. Sie liest das HTML und will von jedem Element zwei Dinge wissen: was es ist und wie es heißt.
Ein <img> antwortet über sein alt-Attribut, ein Formularfeld über sein <label>, ein Abschnitt über seine Überschrift. Fehlt die Antwort, sagt die Software „Bild“, „Eingabefeld“ oder „Link“ und macht weiter, was niemandem hilft. Die Web Content Accessibility Guidelines (WCAG) machen aus dieser Idee prüfbare Regeln, und ein guter Teil davon lässt sich von einem Programm prüfen.
Was der Test prüft und was jeder Fund kostet
Die Seite startet mit 100 Punkten. Jeder Fund zieht etwas ab, und ein Problem, das sich wiederholt, kostet mehr, bis zu einer Obergrenze.
| Fund | Abgezogene Punkte |
|---|---|
Kein lang an <html> | 10 |
Zoom gesperrt (user-scalable=no oder maximum-scale unter 2) | 10 |
Leerer oder fehlender <title> | 6 |
Bilder ohne alt-Attribut | 4 + 2 pro Bild, höchstens 20 |
| Formularfelder ohne Label | 5 + 3 pro Feld, höchstens 20 |
| Links oder Buttons ohne Namen | 4 + 2 pro Stück, höchstens 20 |
| Überhaupt keine Überschrift | 8 |
Kein <h1>; übersprungene Überschriftenebenen | 4; 2 + 1 pro Sprung, höchstens 6 |
| Nichtssagender Linktext („hier klicken“, „weiterlesen“) | 2 + 1 pro Link, höchstens 8 |
| Inline gestylter Text mit Kontrast unter 4,5:1 | 3 + 2 pro Stück, höchstens 10 |
<iframe> ohne title | 2 + 1 pro Stück, höchstens 6 |
Doppelte id-Werte | 1 + 1 pro Stück, höchstens 5 |
| Audio oder Video, das automatisch mit Ton startet | 4 |
Kein <main>-Bereich; ein tabindex über 0 | je 3 |
Der Test überspringt Elemente, die mit hidden, aria-hidden="true" oder einem Inline-display:none versteckt sind, sowie Bilder mit role="presentation".
Die Note lesen
Die verbleibenden Punkte werden zu einem Buchstaben: A ab 90, B ab 80, C ab 65, D ab 50, darunter F. Rote Funde sind Barrieren, also Dinge, die jemanden daran hindern, eine Aufgabe zu Ende zu bringen. Gelbe Funde bremsen, ohne aufzuhalten. Unter jedem Fund sehen Sie bis zu acht der betroffenen Elemente, angezeigt als Tag mit Dateipfad, Feldname, id oder Klasse, damit Sie sie in Ihren Templates suchen können.
Ein A bedeutet, dass der Test keines der Probleme gefunden hat, die er erkennen kann. Automatische Tests erfassen etwa ein Drittel der echten Barrieren. Ob Ihre Alt-Texte zutreffen, ob die Lesereihenfolge Sinn ergibt, wie sich ein eigenes Menü mit der Tastatur verhält: Das muss ein Mensch beurteilen.
Lösungen für die häufigsten Funde
- Bild ohne Alt-Text
- Sagen Sie, was das Bild einem sehenden Leser vermittelt:
<img src="team.jpg" alt="Five engineers around a whiteboard">. Für reine Dekoration schreiben Siealt="". Der leere Wert sagt Hilfsprogrammen, dass sie das Bild überspringen sollen, und das ist nicht dasselbe, wie das Attribut wegzulassen. - Feld ohne Label
<label for="email">Email</label> <input id="email" type="email">. Ein Platzhalter zählt nicht, denn er verschwindet beim ersten Tastendruck.- Link oder Button nur mit Icon
<button aria-label="Open menu">…</button>, oder geben Sie dem Icon-Bild darin einalt.- Übersprungene Überschriftenebene
- Wählen Sie die Ebene nach der Gliederung (
h2für einen Abschnitt,h3darin) und legen Sie die Größe per CSS fest. - Gesperrter Zoom
- Kürzen Sie das Viewport-Tag auf
<meta name="viewport" content="width=device-width, initial-scale=1">.
Was dieser Test nicht sieht
Unser Server liest das HTML, das er erhält, und führt kein JavaScript aus. Was ein Framework nach dem Laden einfügt, bleibt also ungeprüft. Er lädt auch Ihre Stylesheets nicht herunter. Deshalb wird Kontrast nur dort gemessen, wo Textfarbe und Hintergrund beide in einem style-Attribut stehen. Für alles andere testen Sie Ihre Farben mit dem Kontrastrechner. Um bei einer Seite weiterzugehen, hören Sie sie sich in der Screenreader-Vorschau an und folgen Sie ihrer Tab-Reihenfolge.
Häufige Fragen
Heißt volle Punktzahl, dass meine Website WCAG-konform ist?
Nein. Es heißt, dass diese Seite die Prüfungen besteht, die ein Programm am rohen HTML ausführen kann. Konformität mit WCAG 2.2 Stufe AA erfordert außerdem manuelle Tests mit Tastatur und Screenreader, für jedes Template der Website.
Was ist der Unterschied zwischen einem leeren und einem fehlenden alt?
alt="" sagt bewusst, dass das Bild dekorativ ist, und Screenreader überspringen es lautlos. Ganz ohne alt-Attribut lesen viele Screenreader ersatzweise den Dateinamen vor, etwa „IMG Unterstrich 4521 Punkt jpg“.
Warum gilt ein Platzhalter nicht als Label?
Ein Platzhalter verschwindet, sobald der Besucher tippt. Wer unterbrochen wird oder eine Vergrößerung nutzt, weiß dann nicht mehr, wonach das Feld gefragt hat. Manche Screenreader lesen ihn auch nicht vor. Ein sichtbares <label> bleibt stehen und vergrößert die Klickfläche.
Der Test meldet kein Kontrastproblem. Sind meine Farben in Ordnung?
Nicht unbedingt. Der Test liest keine Farben aus Stylesheets, nur die direkt in style="…"-Attributen gesetzten. Prüfen Sie die Farben Ihres Haupttexts und Ihrer Buttons von Hand mit dem Kontrastrechner.
Meine Seite ist mit React oder Vue gebaut. Ist das Ergebnis verlässlich?
Nur wenn das HTML auf dem Server gerendert wird. Schickt der Server ein fast leeres Dokument und baut der Browser die Seite mit JavaScript auf, sieht der Test das leere Dokument und meldet wenig oder nichts.