WCAG Web Accessibility
Vier Kriterien an einem Formular
Feldname, Schaltfläche, Eingabezweck, Textkontrast: vier Prüfungen im Kontaktformular.
WCAG als Prüfmodell
Eine Seite, vier Prüfblicke
Die vier Prinzipien sind keine getrennten Checklisten. Sie betrachten dieselbe Nutzung aus vier Richtungen: Was kommt an, was lässt sich bedienen, was bleibt verständlich und was geben Browser und Hilfsmittel weiter?
Prüfatlas einer Kontaktseite
Konzeptionelle Darstellung · kein Produkt-Screenshot
Öffnungszeiten und Anfahrt stehen als Text bereit.
textbox „E-Mail-Adresse“, ungültigWahrnehmbar
Textalternative, Struktur und Kontrast transportieren den Inhalt.
4 RichtlinienBedienbar
Tastatur, Fokus, Zeit und Ziele entscheiden, ob die Aktion erreichbar ist.
5 RichtlinienVerständlich
Beschriftung, Reihenfolge und konkrete Fehlerhilfe machen den Ablauf erwartbar.
3 RichtlinienRobust
Name, Rolle, Wert und Status müssen programmatisch erkennbar sein.
1 RichtlinieVom Prinzip zum belastbaren Befund
Nur Erfolgskriterien bestimmen die Bewertung nach WCAG. Techniken helfen bei der Umsetzung, sind aber informative Beispiele und nicht selbst die Anforderung.
- ordnet4 PrinzipienWahrnehmbar bis robust
- gliedert13 RichtlinienZiele je Themenfeld
- prüftErfolgskriterienNormativer Wortlaut, Stufe A bis AAA
- belegtTechniken und TestsHilfen für Umsetzung und Nachweis
Eine Konformitätsaussage hat fünf geschlossene Glieder
Fehlt ein Glied, beschreibt das Ergebnis Fortschritt oder einzelne Befunde.
- StufeAlle Kriterien der gewählten Stufe sind erfüllt: AA schließt A ein.
- Ganze SeiteKein Bereich und keine automatisch gelieferte responsive Variante bleibt außen vor.
- Ganzer ProzessBei einer Aufgabe gehören alle dafür nötigen Seiten zum Umfang.
- Unterstützte TechnikVerwendete Verfahren funktionieren mit Browsern und Hilfsmitteln.
- Keine StörungNicht konformer Inhalt blockiert den übrigen Seiteninhalt nicht.
So prüfen Sie es
1 · Aufgabe wählenZum Beispiel: Kontaktformular vollständig absenden.
2 · Vier DurchgängeInhalt, Bedienung, Verständnis und Browser-Ausgabe getrennt betrachten.
3 · Genau zuordnenJe Befund Erfolgskriterium, Stufe, Zustand und Beleg notieren.
4 · Umfang erweiternVor einer Konformitätsaussage ganze Seiten und Prozesse einbeziehen.
Aus dem Prüfbericht
Vier Kriterien, vier Befunde
Kritisch Das Namensfeld ohne Beschriftung Regel label
Der Text über dem Feld ist nur ein span. Ein label mit for macht ihn zum Namen des Felds.
Kritisch Die Absenden-Schaltfläche zeigt nur ein Symbol Regel button-name
Der Pfeil trägt aria-hidden und der Button kein Wort. aria-label benennt, was der Klick auslöst.
Kritisch Der Eingabezweck ist erfunden Regel autocomplete-valid
Einen selbst ausgedachten autocomplete-Wert kennt kein Browser. Nur die standardisierten Werte wie name füllen Felder vor.
Kritisch Der Hinweis unter dem Feld ist zu blass Regel color-contrast
Graue Schrift auf grauer Fläche erreicht 1,17:1. Für normalen Text sind 4,5:1 die Untergrenze.
Zum Mitnehmen
Das Kontaktformular, korrigiert
Zwei Zeilen HTML und ein Farbwert. Das Formular sieht aus wie zuvor.
Korrektur in 3 Schritten ansehen
Feldname und Eingabezweck setzen
Ein label mit for gibt dem Feld seinen Namen. autocomplete nimmt nur standardisierte Werte; für den Namen ist es name.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Ihr Name</span> <input id="name" type="text" autocomplete="kundenname">Nachher
<label for="name">Ihr Name</label> <input id="name" type="text" autocomplete="name">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Ihr Name“. Der Cursor springt ins Feld, der Browser schlägt Ihren Namen vor.
Die Absenden-Schaltfläche benennen
Das Symbol bleibt sichtbar und für Vorleseprogramme verborgen. aria-label liefert das Wort, das der Button sonst nicht hat.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="submit" class="senden"> <svg aria-hidden="true"><use href="#icon-pfeil"></use></svg> </button>Nachher
<button type="submit" class="senden" aria-label="Anfrage senden"> <svg aria-hidden="true"><use href="#icon-pfeil"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf die Schaltfläche. Ein Vorleseprogramm sagt „Anfrage senden, Schaltfläche“.
Den Hinweistext lesbar machen
Farben zählen immer als Paar. Weiß auf demselben Grün erreicht die 4,5:1, die für normalen Text gelten.
KorrekturvergleichSchritt 3 · CSS Vorher
.formular-hinweis { color: #8b8f8d; background: #626e69; font-size: 0.75rem; }Nachher
.formular-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.