Accessibility Test online
Was der Test misst und was er meldet
Vier Fundstellen auf einer Beispielseite, jede mit ihrem Messwert.
Reichweite des Tests
Ein Ergebnis ist immer ein Ausschnitt
Der Online-Test sieht den geladenen Zustand. Weitere Seiten und Handlungen erweitern das Bild.
Noch nicht ausgelöst
Diese Ansichten müssen gezielt geöffnet und geprüft werden.
Welche Prüfung beantwortet welche Frage?
Mehr Reichweite bedeutet nicht automatisch mehr Tiefe. Beides wird getrennt geplant.
Online-Befund + eigener Test
So prüfen Sie es
Wählen Sie eine Seite mit Formular oder aufklappbarer Navigation.
- URLStartzustand prüfenDer Bericht zeigt technische Befunde der geladenen Ansicht.
- TabOhne Maus durchlaufenDie Reihenfolge ist nachvollziehbar und der Fokus bleibt sichtbar.
- EnterZustand auslösenÖffnen Sie Menü oder Dialog und prüfen Sie den neuen Fokusweg.
- FehlerLeere Eingabe absendenDie Meldung benennt das Problem und ist am Feld auffindbar.
Das Ergebnis zusammenführen: Der Online-Bericht liefert reproduzierbare technische Fundstellen. Ihre Bedienprobe ergänzt die Zustände, die beim ersten Laden nicht existierten.
Aus dem Prüfbericht
Vier Fundstellen, vier Befunde
Kritisch Das Feld hat keinen Namen Regel label
Der Test findet jedes Feld ohne verbundene Beschriftung. Ein label mit for behebt den Befund.
Kritisch Die Schaltfläche hat keinen Namen Regel button-name
Ein Pfeil-Symbol ohne Wort ergibt „Schaltfläche“ ohne Namen. aria-label liefert das Wort.
Kritisch Der Kontrast liegt unter 4,5:1 Regel color-contrast
Der Test rechnet Textfarbe gegen Hintergrund. Für normalen Text braucht es mindestens 4,5:1.
Kritisch Ungültiger Wert an aria-expanded Regel aria-valid-attr-value
„maybe“ ist kein Zustand. Erlaubt sind true und false, sonst bleibt der Zustand unbekannt.
Zum Mitnehmen
Zwei Messwerte, korrigiert
Eine Farbe, ein Attribut. Beides misst der Test sofort nach.
Korrektur in 2 Schritten ansehen
Den Kontrast der Bildunterschrift anheben
Auf der Bildfläche reicht Grau nicht. Dunkle Schrift auf hellem Grund kommt über 4,5:1.
KorrekturvergleichSchritt 1 · CSS Vorher
.figure__caption { color: #58635f; background: #626e69; }Nachher
.figure__caption { color: #151514; background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Messen Sie beide Farben in einem Kontrastrechner. Der Wert liegt jetzt über 4,5:1.
Den Zustand gültig setzen
aria-expanded trägt true oder false, nichts anderes. JavaScript wechselt den Wert beim Klick.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-expanded="maybe">Anfahrt anzeigen</button>Nachher
<button type="button" aria-expanded="false">Anfahrt anzeigen</button>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Anfahrt anzeigen, Schaltfläche, reduziert“ statt nur „Schaltfläche“.