Cascading Style Sheets (CSS) ermöglichen mit Stildefinitionen die visuelle Gestaltung von Websites und digitalen Anwendungen. Im Kontext der Barrierefreiheit kommt CSS eine Schlüsselrolle zu: Durch die strikte Trennung von Inhalt (HTML) und Design (CSS) wird die Flexibilität und Anpassungsfähigkeit der Darstellung gewährleistet.
Für die barrierefreie Gestaltung sind einige Aspekte entscheidend: Die Layouts müssen responsiv und flexibel sein, um verschiedene Bildschirmgrößen und Zoomstufen zu unterstützen. Kontrastverhältnisse zwischen Text und Hintergrund müssen den WCAG-Richtlinien entsprechen, Fokus-Indikatoren müssen deutlich sichtbar sein etc.
Besondere Bedeutung hat CSS bei der Unterstützung verschiedener Nutzungspräferenzen: Durch Media Queries können Websites auf individuelle Bedürfnisse reagieren – etwa beim Kontrast (prefers-contrast
), bei Animationen (prefers-reduced-motion
) oder beim Farbschema (prefers-color-scheme
).
Ein häufiger Fehler ist die ausschließlich farbbasierte Kennzeichnung von Informationen – etwa bei Fehlermeldungen oder Statusinformationen. Stattdessen sollten zusätzliche visuelle Merkmale wie Icons oder Unterstreichungen verwendet werden.
Auch die Reihenfolge der Inhalte spielt eine wichtige Rolle: CSS-Eigenschaften wie order
oder flex-direction
dürfen die logische Lesereihenfolge im HTML nicht beeinträchtigen, da dies Screenreader-Nutzende verwirren könnte.