Fügen Sie HTML ein oder wählen Sie eine Datei für den Prüfbericht. Tastaturbedienung und gerendertes Layout müssen zusätzlich an der Oberfläche geprüft werden.
Läuft lokal in deinem BrowserDiese Quelltextprüfung kann berechnetes Layout, Tastaturverhalten, dynamische Zustände oder den echten Accessibility-Tree einer laufenden Anwendung nicht prüfen.
Nutzen Sie die Funde als Prüfliste und testen Sie die gerenderte Oberfläche anschließend mit Tastatur, Browser-Accessibility-Tree und Menschen, die assistive Technologien verwenden.
Fügen Sie ein HTML-Dokument oder einen Ausschnitt in den Editor ein oder wählen Sie eine lokale Datei und drücken Sie Lokal prüfen. Der Bericht entsteht allein aus dem Markup: doppelte IDs, fehlendes oder leeres lang-Attribut, fehlender main-Landmark, fehlende oder mehrfache H1-Überschriften, Überschriftenebenen, die eine Stufe überspringen, Bilder ohne alt-Attribut, Formularfelder ohne Label oder zugänglichen Namen, Schaltflächen und Links ohne Namen, allgemeine Linktexte, Datentabellen ohne Kopfzellen, leere Überschriften und iframes ohne Titel.
Das rechte Feld beantwortet eine andere Frage: das Kontrastverhältnis zweier Farben, berechnet nach der Definition von WCAG. Beide Felder laufen in diesem Browser-Tab, die Seite arbeitet also offline, und weder Markup noch Datei oder Farbe werden hochgeladen.
Prüfpunkte sind Fehler, die sich aus dem Text belegen lassen: eine doppelte ID, ein Bild ohne alt-Attribut, ein Feld ohne Label, aria-label, aria-labelledby oder brauchbaren title, eine Schaltfläche oder ein Link ohne zugänglichen Namen, eine leere Überschrift, ein iframe ohne Titel und ein Element mit role=button, das keinen Tastaturfokus erhalten kann. Ein umschließendes Label, der Standardname, den Browser einem submit- oder reset-Feld geben, und der alt-Text eines image-Feldes gelten als Name, gültiges Markup wird also nicht gemeldet.
Hinweise hängen vom Zusammenhang ab: ein Dokument ohne main-Landmark, eine Überschriftenfolge, die eine Stufe überspringt, ein Link, dessen Text nur "click here" lautet, und eine Tabelle ohne th-Zellen. Ein Blick lohnt sich, falsch sind sie nicht immer. Bleibt kein Prüfpunkt übrig, sagt der Bericht das; die Aussage gilt für diese Liste, nicht als Nachweis der WCAG-Konformität.
Jede Farbe wird mit der sRGB-Formel von WCAG in relative Luminanz umgerechnet (Kanal durch 255, dann / 12,92 oder ((c + 0,055) / 1,055) ^ 2,4), das Verhältnis ist (L1 + 0,05) / (L2 + 0,05). Schwarz auf Weiß ergibt 21:1, eine Farbe auf sich selbst 1:1. Die Reihenfolge der beiden Werte spielt keine Rolle.
Die angezeigten Stufen sind die WCAG-Schwellen: 4,5:1 für normalen Text (AA), 3:1 für großen Text sowie für Bedienelemente und Grafiken (AA) und 7:1 für normalen Text in AAA. Schriftgröße, Schriftgewicht und das gerenderte Ergebnis gehören nicht zur Rechnung, deshalb nennt die Seite die erreichte Stufe statt eines Urteils. Akzeptiert werden nur 3- oder 6-stellige Hex-Werte; rgb(), HSL und Farbnamen erhalten einen Hinweis statt eines Verhältnisses.
Die Prüfung liest Markup und rendert das Dokument nie. Gerenderter Kontrast, Fokusreihenfolge, Tastaturfallen, Hover- und Fokuszustände, Live-Regionen, ARIA-Zustandswechsel, Untertitel und alles, was nur in einer laufenden Anwendung existiert, liegen außerhalb. Automatische Regeln decken zudem nur einen Teil der WCAG ab: Tastatur- und Screenreader-Tests, Zoom und Textabstände bleiben Handarbeit.
Das Farbfeld prüft ein Paar nach dem anderen und kennt die Schriftgröße nicht; behandeln Sie die Stufe als Anlass, das echte Element anzusehen. Lässt sich eine Farbe nicht auswerten, kehrt die Kontrastzeile der Übersicht zu einem Gedankenstrich zurück und der Hinweis unter den Feldern nennt das erwartete Format.