CSS barrierefrei
Lesbar, anpassbar, erkennbar
Kontrast, Textabstände, Links: drei Stellen, die das CSS entscheidet.
CSS-Stresstest
Gutes CSS hält Veränderungen aus
Prüfen Sie nicht nur den Normalzustand, sondern fünf veränderte Ansichten.
Reflow
320 CSS pxSpalten werden zu einer Lesespur. Text bleibt vollständig, die Seite scrollt nur senkrecht.
Tastaturfokus
:focus-visibleDer Ring liegt außerhalb der Fläche, bleibt sichtbar und wird nicht abgeschnitten.
Textabstände
1.5 · 2 · .12 · .16Größere Zeilen-, Absatz-, Zeichen- und Wortabstände vergrößern den Block, ohne Text zu verdecken.
Link im Satz
nicht nur FarbeDie Unterstreichung bleibt auch in Graustufen als Merkmal erhalten.
Reduzierte Bewegung
reduceNicht notwendige Fahrten entfallen. Eine direkte Zustandsänderung darf die Information erhalten.
Startpunkt
Ein belastbares Basis-Stylesheet
Der Block setzt keine Konformität voraus. Er schafft Regeln, die Sie mit Ihren Inhalten, Farben und Komponenten prüfen.
:root {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.5;
}
p,
li {
max-inline-size: 70ch;
overflow-wrap: anywhere;
}
img,
svg,
video {
max-inline-size: 100%;
block-size: auto;
}
.layout {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
p a,
li a {
color: currentColor;
text-decoration: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.18em;
}
:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.decorative-motion {
animation: none;
transition: none;
}
}
@media (forced-colors: active) {
:focus-visible {
outline-color: CanvasText;
}
}Flexible Maße
min(100%, 18rem) verhindert, dass eine Grid-Spalte breiter als ihr schmaler Container bleibt. Medien schrumpfen mit ihrer Umgebung.
Keine feste Texthöhe
Das Stylesheet setzt weder height noch overflow: hidden auf Text. Eigene Leseabstände dürfen den Block höher machen.
Bewegung gezielt ersetzen
Kennzeichnen Sie dekorative Bewegung mit einer Klasse. So reduzieren Sie sie, ohne notwendige Statuswechsel pauschal zu löschen.
Kontrast bleibt Messarbeit
CSS-Syntax beweist keinen ausreichenden Kontrast. Messen Sie jedes Text-Hintergrund-Paar und prüfen Sie Fokusrahmen auf allen Flächen.
Aus dem Prüfbericht
Drei Befunde an einem Absatz
Kritisch Zu schwacher Kontrast im Hinweistext Regel color-contrast
Graugrüne Schrift auf graugrüner Fläche ergibt 1,17:1. Ab 4,5:1 bleibt normaler Text verlässlich lesbar.
Kritisch Der Absatz lässt sich nicht auseinanderziehen Regel avoid-inline-spacing
Zeichen- und Wortabstand stehen mit !important fest. Ohne diese Sperre greifen die Leseeinstellungen der Besucher.
Kritisch Der Link im Satz bleibt unauffällig Regel link-in-text-block
Zwischen Link- und Textfarbe liegen 2,02:1. Eine Unterstreichung macht ihn unabhängig von der Farbe erkennbar.
Zum Mitnehmen
Die drei CSS-Regeln, korrigiert
Farbe, Abstände und Linkgestaltung in einem Durchgang.
Korrektur in 3 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.
Links im Fließtext unterstreichen
Farbe allein trägt die Bedeutung nicht. Eine Unterstreichung macht den Link im Absatz erkennbar, auch ohne Farbwahrnehmung.
KorrekturvergleichSchritt 3 · CSS Vorher
.rune-transcript .stone-link { color: #a8b08d; text-decoration: none; }Nachher
.rune-transcript .stone-link { color: #a8b08d; text-decoration: underline; text-underline-offset: 0.15em; }Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie den Bildschirm auf Graustufen. Der Link bleibt im Absatz erkennbar.