CSS Accessibility Checker
Was im Stylesheet auffällt
Kontrastwerte und gesperrte Textabstände: zwei Muster im CSS.
CSS-Prüflabor
Vom Stylesheet bis zum echten Hindernis
Ein Fund im Quelltext ist ein Startpunkt. Erst Kaskade, gerenderter Zustand und Bedienung zeigen, ob daraus auf der Seite eine Barriere wird.
colorRegel gefunden!importantInline-Sperreoutline: noneRisikosignalwidth / orderRisikosignalAutomatisch heißt: dieser Zustand ist messbar
Ein browserbasierter Check kennt DOM, Kaskade und berechnete Stile des aktuellen Zustands. Bilder, Verläufe, verdeckte Elemente und noch nicht ausgelöste Zustände können eine eindeutige Messung verhindern.
Manuell heißt: den Zielzustand herstellen
Zoomen, Textabstände überschreiben, mit Tab navigieren und die visuelle Reihenfolge mit der DOM-Reihenfolge vergleichen. Nur so sehen Sie Verlust, Überlagerung und unlogische Wege.
So prüfen Sie es
- Starten Sie den automatischen Check auf der gerenderten Seite. Trennen Sie eindeutige Verstöße von Hinweisen und Ergebnissen, die eine Sichtprüfung verlangen.
- Setzen Sie den Viewport auf 320 CSS-Pixel. Für fortlaufenden Inhalt darf keine horizontale Leserichtung nötig werden; zweidimensionale Inhalte prüfen Sie separat.
- Fügen Sie das Test-Stylesheet als Benutzerstil ein. Kein Text und keine Funktion darf durch die vier veränderten Abstände verloren gehen.
- Navigieren Sie mit Tab durch alle Bedienelemente und lösen Sie verborgene Zustände aus. Fokus und Inhalt müssen auf jeder tatsächlich verwendeten Fläche sichtbar bleiben.
Aus dem Prüfbericht
Zwei Muster, die im CSS stehen
Kritisch Farbpaare unter dem Grenzwert Regel color-contrast
Der Check rechnet prüfbare Textfarben gegen ihren ermittelten Hintergrund. Unter 4,5:1 bei normalem Text gehört die Farbe geändert.
Kritisch Textabstände mit !important im style-Attribut Regel avoid-inline-spacing
Gesperrte Zeichen- und Wortabstände blockieren eigene Leseeinstellungen. Ohne !important bleibt die Vorgabe überschreibbar.
Zum Mitnehmen
Die gemeldeten Stilregeln, korrigiert
Eine Farbe und eine Sperre weniger.
Korrektur in 2 Schritten ansehen
Den Textkontrast anheben
Normaler Text braucht mindestens 4,5:1 zum Hintergrund. Auf der vorhandenen graugrünen Fläche erreicht weiße Schrift 5,31:1.
KorrekturvergleichSchritt 1 · CSS Vorher
.machine-tag { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.machine-tag { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie die Stelle bei geringer Bildschirmhelligkeit an. Der Text hebt sich klar von der Fläche ab.
Die Textabstände freigeben
Ohne !important können eigene Leseeinstellungen die Abstände vergrößern. Die feste Höhe entfällt, damit der Absatz mitwachsen kann.
KorrekturvergleichSchritt 2 · CSS Vorher
.station-note { line-height: 1 !important; letter-spacing: 0 !important; word-spacing: 0 !important; height: 2em !important; overflow: hidden !important; }Nachher
.station-note { line-height: 1.5; letter-spacing: 0; word-spacing: 0; height: auto; overflow: visible; }Markierte Zeilen wurden geändert
So prüfen Sie es Erhöhen Sie im Browser die Zeilenhöhe. Der Absatz wird höher, statt Text abzuschneiden.