Barrierefreiheit mit CSS
Layouts, Motion und modernes Toolkit hast du schon. Barrierefreiheit in CSS ist die Schicht, die Menschen spüren: Sehen sie, wo die Tastatur fokussiert? Ist der Text lesbar? Macht eine drehende Animation krank? Diese Session ist kein HTML-Dump (Landmarks, alt, ARIA). Es geht um Style-Gewohnheiten, die Fokus, Kontrast und Bewegung nutzbar halten.
Fokus muss sichtbar bleiben
Tastaturnutzer tabben durch Links und Steuerelemente. Verschwindet der Fokusring, sind sie verloren. Bevorzuge :focus-visible, damit Mausklicks ruhig bleiben und Tastaturfokus laut bleibt:
:root {
--focus-ring: #2563eb;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
.text-link:focus:not(:focus-visible) {
outline: none;
}
:focus-visible trifft die Fälle, in denen ein Fokusring hilft (meist Tastatur). Kombiniere ihn mit einem kontrastreichen Ring und etwas outline-offset, damit er nicht mit Borders kollidiert.
Nie outline: none ohne Ersatz
Den Standard-Outline zu entfernen ist nur in Ordnung, wenn du einen klareren eigenen Fokus-Style lieferst. Ein nacktes *:focus { outline: none; } ist die klassische Falle:
/* Bad: keyboard users lose the only cue */
.bad-button:focus {
outline: none;
}
/* Good: custom ring that still shows focus */
.good-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f766e;
}
Unterdrückst du den Browser-Outline, muss etwas anderes das fokussierte Control markieren — box-shadow, Border-Farbe oder ein Hintergrundwechsel, der auf jedem Theme offensichtlich bleibt.
Kontrast ist eine CSS-Entscheidung
Markenfarben wirken auf dem Moodboard scharf und auf dem Handy in der Sonne matschig. Behandle Vordergrund-/Hintergrund-Paare als Accessibility-Entscheidungen, nicht nur als Dekoration:
:root {
--surface: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-text: #0c4a6e;
}
.hero {
background: var(--surface);
color: var(--text);
}
.hero .lede {
color: var(--muted);
}
.hero .cta {
background: var(--accent);
color: var(--accent-text);
font-weight: 700;
}
Ziel auf starken Kontrast bei Fließtext und Buttons. Dekoratives Grau darf bei Nebentexten weicher sein — Primärtext und Controls müssen lesbar bleiben. Prüfe Paare mit einem Kontrast-Checker, bevor die Palette live geht.
Reduzierte Bewegung respektieren
Animationen und große Transforms können Unwohlsein auslösen. Wickle nicht essenzielle Motion in prefers-reduced-motion:
.banner {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.banner.is-shown {
transform: translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.banner,
.banner.is-shown {
transition: none;
transform: none;
}
.spinner {
animation: none;
}
}
Wer im OS weniger Bewegung will, soll den finalen UI-Zustand trotzdem bekommen — nur ohne die Reise dorthin. Essenzielle Opacity- oder Layout-Änderungen behalten; Endlos-Spinner und große Slides streichen.
Hoher Kontrast und forced-colors
Manche Umgebungen überschreiben deine Palette (Windows High Contrast / forced-colors). Weiche fragile Dekoration ab und behalte echte Borders:
.card {
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
@media (forced-colors: active) {
.card {
border: 1px solid CanvasText;
background: Canvas;
box-shadow: none;
color: CanvasText;
}
.card a {
color: LinkText;
}
}
Systemfarben wie Canvas, CanvasText und LinkText helfen Controls sichtbar zu bleiben, wenn der Nutzer — nicht dein Styleguide — die Farben bestimmt.
Gewohnheiten auf CSS-Seite
📊 CSS accessibility habits
| Practice | CSS habit | Avoid |
|---|---|---|
| Keep focus findable | :focus-visible + strong ring / shadow |
outline: none with no replacement |
| Readable type | High-contrast text/background tokens | Light grey on white for body copy |
| Kind motion | @media (prefers-reduced-motion: reduce) |
Endless spins for everyone |
| Survive high contrast | Real borders; forced-colors tweaks |
Shadow-only “edges” |
| Reachable controls | Comfortable padding / hit area | Tiny icon-only targets with no focus style |
HTML besitzt weiterhin Landmarks, Labels und Alt-Text. CSS entscheidet, ob diese Controls nach dem Styling noch wahrnehmbar bleiben.
Skip-Links und focus-within
Ein Skip-Link springt über wiederholte Chrome-Elemente. Style ihn so, dass er bei Fokus erscheint. :focus-within kann auch eine ganze Gruppe hervorheben, wenn ein Kind fokussiert ist:
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
padding: 0.5rem 0.75rem;
background: #111827;
color: #fff;
border-radius: 0.375rem;
z-index: 20;
}
.skip-link:focus-visible {
top: 1rem;
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.nav:focus-within {
box-shadow: inset 0 0 0 2px #2563eb;
}
Der Skip-Link bleibt bis zum Fokus außerhalb des Sichtfelds, dann wird er offensichtlich. Der Nav-Ring hilft, wenn Tab auf einem Kind-Link in der Leiste landet.
Selbst ausprobieren
- Gib Links und Buttons einen
:focus-visible-Ring; tabbe durch die Seite und prüfe, dass Fokus immer sichtbar ist. - Nimm ein kontrastarmes Paar und repariere es mit dunklerem Text oder tieferer Fläche.
- Wickle eine Transition oder Animation in
prefers-reduced-motion: reduceund toggele die OS-Einstellung (oder DevTools-Emulation). - Unter forced-colors-Emulation sicherstellen, dass Karten noch einen echten Border zeigen.
- Style einen Skip-Link, der nur bei Tastaturfokus erscheint.
Typische Fehler
- Globales
outline: none(oderoutline: 0) ohne eigenen Fokus-Style - Hübsche Markenfarben, die bei Fließtext und Primärbuttons am Kontrast scheitern
- Große Animationen für alle ohne
prefers-reduced-motion-Tor - Ein fokussierbares Control nur mit
opacity: 0verstecken, während es noch Tab empfängt - Diese CSS-Lektion als vollständigen Ersatz für semantisches HTML und ARIA behandeln
Kurz zusammengefasst
- Tastaturfokus sichtbar halten —
:focus-visiblebevorzugen und Outline nie ohne stärkeres Signal löschen - Farbkontrast für Text und Controls als Pflicht behandeln
prefers-reduced-motionehren und Styles fürforced-colorsabsichern- Skip-Links stylen und
:focus-withinnutzen, wo eine Gruppe ein gemeinsames Signal braucht - Als Nächstes: CSS Zusammenfassung und nächste Schritte (
summary) — Kurs vor dem Miniprojekt abrunden
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt