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 Web Content Accessibility Guidelines 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).
CSS kann Inhalte für eine assistive Technologie vollständig entfernen: display: none und visibility: hidden nehmen ein Element aus dem Accessibility Tree, nicht nur aus der Ansicht. Umgekehrt kann man mit CSS auch Inhalte nur für den Screenreader zugänglich machen.
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.
