WCAG-Audit-Tool
Vom Befund im Bericht zur behobenen Stelle
Formularfeld und Hinweistext: zwei Befunde aus dem Bericht.
Audit-Kontrollraum
Ein Tool liefert Befunde. Ein Audit liefert eine begründete Aussage.
Planen Sie Umfang, Stichprobe und Prüfwege vor dem ersten Scan. So bleibt später nachvollziehbar, was geprüft wurde – und was nicht.
Prozesskarte nach WCAG-EM 2.0
Fünf Stationen vom Auftrag zum Bericht
Statische ArbeitsansichtProdukt, Ziel, Konformitätsstufe und einbezogene Teile.
Schlüsselansichten, Funktionen, Zustände und eingesetzte Technik.
Repräsentative Ansichten strukturiert und ergänzend zufällig auswählen.
Drei Prüfwege erzeugen unterschiedliche Belege.
Umfang, Verfahren, Befunde und Grenzen zusammenführen.
Automatisierte Regeln
Wiederholbare Befunde im gerenderten Code, etwa fehlende Namen oder messbare Kontraste.
Geführte Interaktion
Tastaturwege, Fokus, Zustandswechsel und Ansagen entlang einer festgelegten Aufgabe.
Fachliches Urteil
Ob Alternativtext, Struktur oder Fehlermeldung den Zweck im Kontext erfüllt.
Beispielbefund · keine Produktansicht
Ein Belegpaket, das die Korrektur und den Nachtest trägt
Lieferadresse
Sichtbarer Text und Feld sind im Code nicht verbunden.
Regel: Formularfeld braucht einen zugänglichen Namen
- Ort
/checkout · Schritt 2 · Grundzustand- Element
#billing-postcode- Beobachtet
- Der Text „Postleitzahl“ steht neben dem Feld, ist aber nicht als Name verbunden.
- Erwartet
- Der sichtbare Text ist über
label forund passendeidmit dem Feld verknüpft. - Nachtest
- Name im Barrierefreiheitsbaum prüfen und denselben automatisierten Lauf wiederholen.
Prüfform wählen
Was das Ergebnis später aussagen darf
Bekannte Regeln im erreichten Zustand
Aussage: Diese Regeln meldeten in diesen erreichten Ansichten die dokumentierten Ergebnisse.
Regeln plus festgelegte Aufgaben
Aussage: Die dokumentierten Aufgaben wurden in den benannten Zuständen geprüft.
Repräsentative Stichprobe nach Methodik
Aussage: Umfang, Stichprobe, Verfahren und Ergebnisse tragen die begründete Bewertung.
Primärquellen für Auditplanung und Werkzeugauswahl
Aus dem Prüfbericht
Zwei Befunde aus einem Lauf
Kritisch Ein Formularfeld ohne verbundenen Namen Regel label
Der Bericht nennt das input und die Regel label. Ein label mit for verbindet den sichtbaren Text mit dem Feld.
Kritisch Zu blasser Hinweistext Regel color-contrast
Der Bericht gibt das gemessene Verhältnis an, hier 1,17 zu 1. Für normalen Text sind 4,5 zu 1 gefordert.
Zum Mitnehmen
Die zwei Befunde, korrigiert
Ein label verbinden, eine Textfarbe aufhellen.
Korrektur in 2 Schritten ansehen
Den sichtbaren Text mit dem Feld verbinden
Nähe auf dem Bildschirm ist keine Verbindung im Code. Ein label mit for stellt sie her und macht den Text anklickbar.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Postleitzahl</span> <input id="plz" type="text" name="plz">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" type="text" name="plz">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Postleitzahl“. Der Cursor springt in das Feld.
Die Textfarbe aufhellen
Auf dieser Fläche erreicht weißer Text 5,31 zu 1. Nur die Schriftfarbe ändert sich, Fläche und Größe bleiben.
KorrekturvergleichSchritt 2 · CSS Vorher
.hinweis { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.hinweis { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Drehen Sie die Bildschirmhelligkeit herunter. Der Hinweis bleibt lesbar.