WCAG im CSS
Zwei Zeilen CSS entscheiden über Lesbarkeit
Bildunterschrift und Hinweistext: zwei Stellen einer Inhaltskarte.
CSS-Stresstest
Gutes CSS hält vier Veränderungen aus
WCAG schreibt kein Design vor. Entscheidend ist, was mit derselben Inhaltskarte bei wenig Kontrast, schmaler Breite, eigenen Textabständen und Tastaturfokus passiert.
Eine Komponente unter vier Prüfbedingungen
Konzeptansicht · keine ProduktoberflächeJeder Link beschreibt sein Ziel. Der aktuelle Ort bleibt sichtbar.
Bericht öffnen.karteText · Fläche · Breite · Fokus · Bewegung4,5:1 Mindestwert für normalen Text. Grenzwerte werden nicht aufgerundet.
Die Seite scrollt in Leserichtung. Nur Inhalte mit notwendigem zweidimensionalem Layout sind ausgenommen.
Die Werte müssen nicht das Standarddesign sein. Die Seite darf beim Überschreiben nichts verlieren.
Der Indikator bleibt sichtbar, solange das Element den Tastaturfokus besitzt.
mindestens 4,5:1Breite 320 CSS px1,5× · 2× · 0,12× · 0,16× SchriftgrößeIndikator sichtbarwcag-basis.css
Das vollständige, kommentierte Grundgerüst
/* 1.4.3: Vordergrund und Fläche immer als Paar prüfen. */
body {
color: #17181a;
background: #fbfbf9;
font-size: 1rem;
}
/* 1.4.10: Text bleibt in der sichtbaren Breite. */
.inhalt {
inline-size: min(100% - 2rem, 68ch);
margin-inline: auto;
overflow-wrap: break-word;
}
/* 1.4.10: Karten werden bei wenig Platz zu einer Spalte. */
.karten {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.5rem;
}
/* 1.4.12: Inhalt darf bei eigenen Abständen wachsen. */
.inhalt p,
.inhalt li {
line-height: 1.6;
}
.hinweis {
block-size: auto;
overflow: visible;
}
/* 1.4.10: Nur die notwendige Tabelle scrollt horizontal. */
.tabellenrahmen {
max-inline-size: 100%;
overflow-x: auto;
}
/* 2.4.7: Tastaturfokus wird sichtbar gezeichnet. */
:focus-visible {
outline: 3px solid #0b4fd8;
outline-offset: 3px;
}
/* 2.3.3: Nicht notwendige Bewegung folgt der Präferenz. */
@media (prefers-reduced-motion: reduce) {
.karte {
animation: none;
transition: none;
}
}
/* Systemfarben bleiben im erzwungenen Kontrast sichtbar. */
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}Vier Zustände
So prüfen Sie es
- Messen Sie normalen Text mit seinem tatsächlich sichtbaren Hintergrund.
- Stellen Sie die Ansicht auf 320 CSS-Pixel Breite oder 400 % Zoom bei 1280 Pixeln.
- Überschreiben Sie Zeilen-, Absatz-, Zeichen- und Wortabstand mit den Prüfwerten.
- Tabben Sie durch alle Bedienstellen; der Fokus bleibt durchgehend sichtbar.
- Aktivieren Sie „Bewegung reduzieren“ und prüfen Sie jede nicht notwendige Animation.
Aus dem Prüfbericht
Zwei Befunde an einer Karte
Kritisch Die Bildunterschrift ist zu blass Regel color-contrast
Graugrüne Schrift auf graugrüner Fläche ergibt 1,17 zu 1. Weißer Text auf derselben Fläche erreicht 5,31 zu 1.
Kritisch Der Hinweis sperrt seine Abstände Regel avoid-inline-spacing
Zeilenhöhe und Wortabstand stehen mit important im style-Attribut. Ohne diese Priorität kann eine Lesehilfe die Abstände vergrößern.
Zum Mitnehmen
Die Inhaltskarte, korrigiert
Eine Farbe getauscht, fünf Prioritäten entfernt.
Korrektur in 2 Schritten ansehen
Die Schriftfarbe auf der Fläche aufhellen
Nur die Textfarbe ändert sich. Aus 1,17 zu 1 werden 5,31 zu 1, Fläche und Schriftgröße bleiben gleich.
KorrekturvergleichSchritt 1 · CSS Vorher
.karte-unterschrift { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.karte-unterschrift { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Betrachten Sie die Karte bei Sonnenlicht auf dem Telefon. Der Satz bleibt lesbar.
Die Abstände überschreibbar machen
Ohne die Priorität kann eine Lesehilfe die Abstände vergrößern. Ohne feste Höhe wächst der Absatz mit, statt Text abzuschneiden.
KorrekturvergleichSchritt 2 · CSS Vorher
.karte-hinweis { line-height: 1 !important; letter-spacing: 0 !important; word-spacing: 0 !important; height: 2em !important; overflow: hidden !important; }Nachher
.karte-hinweis { line-height: 1.5; letter-spacing: 0; word-spacing: 0; height: auto; overflow: visible; }Markierte Zeilen wurden geändert
So prüfen Sie es Vergrößern Sie Zeilenhöhe und Wortabstand im Browser. Der Hinweis bleibt vollständig sichtbar.