Barrierefreiheit & Fokus
Barrierefreies CSS macht Bedienung sichtbar, lesbar und ruhig - für Tastatur, Screenreader und Menschen mit Bewegungsempfindlichkeit.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Fokus sichtbar machen
Entferne niemals outline ohne Ersatz.
:focus-visible zeigt den Fokus nur bei Tastaturbedienung und hält Mausklicks ruhig.
Ein gut sichtbarer Fokusring gehört zu jedem Link, Button und Formularfeld. Er ist Teil der Bedienung, nicht nur Dekoration.
.button:focus-visible,
.link:focus-visible {
outline: 3px solid #0f766e;
outline-offset: 2px;
}Kontrast und Lesbarkeit
Text braucht mindestens 4,5:1 Kontrast zum Hintergrund, große Schrift mindestens 3:1.
Farbe allein darf keine Information tragen.
Zeilenlänge, line-height und ausreichende Schriftgröße beeinflussen die Lesbarkeit stärker als viele dekorative Details.
.prose {
max-width: 65ch;
line-height: 1.6;
color: #1e293b;
background: #ffffff;
}Bewegung reduzieren
Manche Menschen werden durch Bewegung krank.
prefers-reduced-motion ist keine Nische, sondern eine wichtige Einstellung.
Reduziere Transitions und Animationen, wenn die Einstellung aktiv ist. Sanfte opacity-Änderungen sind oft eine verträgliche Alternative.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Vertiefung
Bedienbarkeit ist Teil des Designs
Ein Fokusring ist kein Schönheitsfehler, sondern die einzige Orientierung für Tastaturnutzer. :focus-visible zeigt ihn gezielt bei Tastaturbedienung.
Kontrast, Zeilenlänge und ruhige Bewegung entscheiden mit, ob Inhalte lesbar bleiben. Prüfe Kontrast mit einem Tool und teste die Seite nur mit Tastatur.
.button:focus-visible {
outline: 3px solid #0f766e;
outline-offset: 2px;
}
.prose {
max-width: 65ch;
line-height: 1.6;
color: #1e293b;
}Merksatz: Sichtbarer Fokus, ausreichender Kontrast und reduzierte Bewegung sind keine Extras, sondern Grundlagen.
Übungsaufgabe
Fokus- und Kontrast-Audit
Repariere ein Stylesheet, das outline entfernt, grauen Text auf weißem Grund nutzt und eine endlose Animation ohne Reduced-Motion-Regel hat.
Das soll dein Programm können
- Fokusring mit :focus-visible
- Kontrastreicher Text
- Lesbare Zeilenlänge
- prefers-reduced-motion für Animationen
- Kein outline: none ohne Ersatz
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Ersetze outline: none durch einen sichtbaren Ring. Dunkle den Text ab und ergänze eine Media Query für reduzierte Bewegung.
Lösung anzeigen
.button:focus-visible {
outline: 3px solid #0f766e;
outline-offset: 2px;
}
.text {
max-width: 65ch;
line-height: 1.6;
color: #1e293b;
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Warum funktioniert das?
Der Fokus bleibt sichtbar, der Text erfüllt den Kontrast und die Bewegung wird bei Bedarf abgeschaltet. Das verbessert die Bedienung, ohne das Design zu verlieren.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Design-System-Karte
Baue eine Karte mit Cascade Layers, Container Query, Fokusring und reduzierter Bewegung. Prüfe sie in einem schmalen und einem breiten Container.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.