Web Accessibility Audit
Ein Audit endet erst beim Nachtest
Prüfumfang, Beleg, Nachtest: der Weg vom Befund zur Abnahme.
Audit-Labor
Vom Produkt zur prüfbaren Aussage
Ein Audit ist kein großer Scan. Es verbindet begründete Auswahl, menschliche Prüfung und reproduzierbare Belege zu einer Aussage, die im Nachtest erneut geprüft werden kann.
Drei Ebenen, die ein Werkzeuglauf allein nicht verbindet
Links wird die Stichprobe begründet, in der Mitte wird sie mit zwei Perspektiven geprüft, rechts entsteht ein Befund, den Entwicklung und Nachtest wiederholen können.
- 01UmfangProdukt · Ziel · Basis
- 02ErkundenAnsichten · Funktionen
- 03Auswählenstrukturiert · zufällig
- 04PrüfenSeiten · Prozesse
- 05BerichtenErgebnis · Belege
- PAntrag starten
- Daten eingeben
- Prüfen
- Bestätigung
- S
- gezielt gewählt: häufige Ansicht, Funktion oder Inhaltstyp
- R
- zufällig ergänzt: prüft, ob die Auswahl repräsentativ bleibt
- P
- Prozess: Standardweg und wichtige Abzweigungen zusammen prüfen
- Name und Rolle vorhanden?
- Kontrast rechnerisch ausreichend?
- ARIA-Wert syntaktisch gültig?
Ergebnis: Kandidat mit Regel, Element und Prüfgrund.
- Ist die Fokusreihenfolge verständlich?
- Beschreibt der Alternativtext das Motiv?
- Bleibt der Prozess im Fehlerfall bedienbar?
Ergebnis: beobachtetes Verhalten und erwartete Nutzung.
WCAG 4.1.2 · Name, Rolle, Wert
Auswahlliste „Anliegen“ hat keinen Namen
- Fundstelle
/kontakt·#anliegen- Schritt
- Mit Tab vom Feld „E-Mail“ einmal weitergehen.
- Beobachtet
- „Auswahlliste, zugeklappt“ — der Zweck fehlt.
- Erwartet
- „Anliegen, Auswahlliste, zugeklappt“.
- Ursache
- Der sichtbare Text ist nicht mit dem Feld verbunden.
- Beleg
- Bild der Fundstelle + DOM-Ausschnitt + Umgebung.
- Nachtest
- Gleiche URL, gleicher Zustand, gleicher Schritt.
<label for="anliegen">Anliegen</label>Befundschema
Schreiben Sie für die Wiederholung
Ein guter Befund trennt Beobachtung und Erwartung. Er nennt Fundstelle, Zustand und Handlung so genau, dass eine andere Person den Fehler ohne Einweisung erreicht.
Halten Sie URL, Produktstand, Ausgangszustand, einzelne Handlungsschritte, Beobachtung, Erwartung, Erfolgskriterium und Beleg getrennt fest.
Befund: A-017
Stand: 2026-09-08 · release-2026.09
Ansicht: /kontakt · Formular im Ausgangszustand
Kriterium: WCAG 2.2, 4.1.2 Name, Rolle, Wert
Schritte:
1. Seite öffnen.
2. Mit Tab zum Feld „E-Mail“ gehen.
3. Tab einmal drücken.
Beobachtet:
Screenreader meldet „Auswahlliste, zugeklappt“.
Erwartet:
Der sichtbare Zweck „Anliegen“ ist Teil des Namens.
Fundstelle: select#anliegen
Komponente: kontakt-formular
Beleg: fundstelle-a017.png + DOM-Ausschnitt
Nachtest: dieselben Schritte auf dem korrigierten StandAbnahme vor dem Start
Ist das Audit reproduzierbar geplant?
- Umfang
Produkt, Version, Sprachen, Zugänge, Ziel und Konformitätsstufe sind benannt.
- Auswahl
Gemeinsame Ansichten, Inhaltstypen, wesentliche Funktionen, Zufallsanteil und vollständige Prozesse sind begründet.
- Prüfung
Werkzeuge samt Versionen, Browser, Hilfstechniken und manuelle Verfahren stehen fest.
- Bericht
Jeder Befund enthält Schritte, Beobachtung, Erwartung, Beleg und betroffene Stelle.
- Nachtest
Umfang, Produktstand, Statuswerte und Umgang mit neu entstandenen Befunden sind vereinbart.
Quellen: W3C: WCAG Evaluation Methodology 2.0, W3C WAI: Evaluating Web Accessibility und W3C WAI: Template for Accessibility Evaluation Reports.
Aus dem Prüfbericht
Zwei Befunde, eine Ursache
Kritisch Die Auswahlliste im Auditformular Regel select-name
Über der Liste steht „Anliegen“ nur als span. Ein label mit for macht daraus den Namen des Auswahlfelds.
Kritisch Das Textfeld daneben Regel label
Auch das Textfeld trägt nur benachbarten Text. aria-labelledby verbindet den vorhandenen Text mit dem Feld.
Zum Mitnehmen
Das Auditformular, korrigiert
Zwei Wege zum Feldnamen, beide belegbar im Nachtest.
Korrektur in 2 Schritten ansehen
Die Auswahlliste benennen
Der sichtbare Text wird über label und for zum Namen der Auswahlliste. Die Optionen bleiben unverändert.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Anliegen</span> <select id="anliegen"> <option value="termin">Termin</option> </select>Nachher
<label for="anliegen">Anliegen</label> <select id="anliegen"> <option value="termin">Termin</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Anliegen“. Die Auswahlliste bekommt den Fokus.
Den vorhandenen Text verknüpfen
Lässt sich das span nicht in ein label ändern, gibt aria-labelledby dem Feld denselben Namen. Der Bericht nennt beide Wege.
KorrekturvergleichSchritt 2 · HTML Vorher
<span>Ihre Nachricht</span> <textarea id="nachricht" rows="4"></textarea>Nachher
<span id="nachricht-label">Ihre Nachricht</span> <textarea id="nachricht" rows="4" aria-labelledby="nachricht-label"></textarea>Markierte Zeilen wurden geändert
So prüfen Sie es Im Nachtest trägt das Feld einen Namen. Der Befund im Bericht gilt damit als erledigt.