CSS Accessibility
Drei Stilregeln, die Inhalte verdecken
Kontrast, Textabstände, Linkgestaltung: drei Stellen im Stylesheet.
CSS unter Belastung
Ein Layout ist erst fertig, wenn es sich verändern darf.
Dieselbe Oberfläche unter Zoom, Textabstand und Systemeinstellungen.
Prüfen Sie den aktuellen Bericht und ordnen Sie offene Punkte zu.
Bericht öffnenKontrast prüfen
Fokusfolge prüfen
Zoom prüfen
Ausgangsansicht · 100 Prozent · normale Abstände
Prüfen Sie den aktuellen Bericht und ordnen Sie offene Punkte zu.
Bericht öffnenBestanden: eine Leserichtung, kein seitliches Pendeln.
Prüfen Sie den aktuellen Bericht und ordnen Sie offene Punkte zu.
Kein Wort abgeschnitten · kein Block überlagert- Zeilenhöhe
- 1,5 × Schrift
- Absatzabstand
- 2 × Schrift
- Buchstaben
- 0,12 × Schrift
- Wörter
- 0,16 × Schrift
Was im Stylesheet trägt
Vier Schutzlinien statt eines Universal-Resets
Die Regeln verhindern typische Brüche. Kontrastwerte und Bewegungen prüfen Sie weiterhin am konkreten Bauteil.
min-block-sizeKeine feste Höhe und kein Abschneiden an Textcontainern.
minmax(min(100%, 20rem), 1fr)Breite Bereiche werden bei wenig Platz zu einer Spalte.
text-decoration: underlineDie Bedeutung hängt im Fließtext nicht allein an Farbe.
@media (prefers-reduced-motion)Problematische Bewegung wird gezielt reduziert oder ersetzt.
Kopierbarer Ausgangspunkt
Das kleine Basis-Stylesheet
Passen Sie .layout und [data-motion] an Ihre Bauteile an. Die Regeln ersetzen keinen Test mit Ihren echten Inhalten.
html {
font-size: 100%;
scroll-behavior: smooth;
}
body {
line-height: 1.5;
}
p,
li {
max-inline-size: 70ch;
}
p a,
li a {
text-decoration: underline;
text-underline-offset: 0.18em;
}
:focus-visible {
outline: 3px solid currentColor;
outline-offset: 0.2rem;
}
img,
video,
svg {
max-inline-size: 100%;
block-size: auto;
}
.layout {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
[data-motion] {
animation: none;
transition: none;
}
}
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}So prüfen Sie es
- Stellen Sie den Viewport auf 320 CSS-Pixel. Lesen und bedienen Sie die Seite nur durch vertikales Scrollen; Tabellen oder Karten können begründete Ausnahmen sein.
- Überschreiben Sie Zeilenhöhe, Absatz-, Buchstaben- und Wortabstand mit den oben gezeigten Werten. Es darf nichts fehlen oder überlagern.
- Aktivieren Sie „Bewegung reduzieren“ und ein Kontrastdesign im Betriebssystem. Prüfen Sie Bewegung, Fokus, Grenzen und verständliche Zustände erneut.
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Die Schriftfarbe auf der Farbfläche Regel color-contrast
Ein Farbpaar im CSS ergibt 1,17:1. Normaler Text braucht mindestens 4,5:1; hier hilft eine hellere Schriftfarbe.
Kritisch Gesperrte Textabstände im style-Attribut Regel avoid-inline-spacing
letter-spacing und word-spacing mit !important verhindern eigene Leseeinstellungen. Ohne !important bleibt die Vorgabe überschreibbar.
Kritisch Links im Absatz ohne Unterstreichung Regel link-in-text-block
Farbe allein reicht im Fließtext nicht. text-decoration: underline macht den Link auch ohne Farbsehen erkennbar.
Zum Mitnehmen
Das Stylesheet, korrigiert
Drei Regeln, drei kurze Änderungen im CSS.
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.