Themenbereich mit 7 Artikeln
CSS
CSS bestimmt, wie ein Dokument aussieht und wie es sich bei Zoom, Tastaturbedienung und veränderten Systemeinstellungen verhält. Fang beim Einbinden an, danach kommen Selektoren, dann Layout mit Flexbox und Grid.
Ein großer Teil der Barrieren im Web entsteht im Stylesheet. Ein entfernter Fokusring, ein overflow: hidden, das bei 200 Prozent Zoom Text abschneidet, eine Grid-Anordnung, die die Lesereihenfolge gegen die Tabulator-Reihenfolge stellt: Das sind alles CSS-Entscheidungen, und keine davon ist im HTML sichtbar. Dieser Bereich behandelt deshalb die gängigen CSS-Aufgaben zusammen mit dem Teil, der über Bedienbarkeit entscheidet.
Das Wichtigste in Kürze
- CSS ändert die Darstellung, die Bedeutung bleibt im HTML. Ein
<div>sieht mitrole-freiem CSS wie ein Button aus und bleibt für die Tastatur unerreichbar. Die Grundlage steht unter semantisches HTML. - Drei Wege führen CSS in ein Dokument: externes Stylesheet über
<link>, internes<style>im<head>,style-Attribut am Element. Für Projekte ist das externe Stylesheet der Normalfall. - Flexbox ordnet entlang einer Achse, Grid entlang zweier Achsen. Diese eine Unterscheidung beantwortet die meisten Layout-Fragen.
- Jede Layout-Eigenschaft, die die visuelle Reihenfolge ändert (
order,row-reverse, freie Grid-Platzierung), lässt die Tabulator-Reihenfolge unverändert. Das verstößt gegen WCAG 1.3.2 Bedeutungstragende Reihenfolge und 2.4.3 Fokus-Reihenfolge, sobald sie die Bedeutung verändert. - Ein Layout muss bei 320 Pixeln Breite und 400 Prozent Zoom ohne horizontales Scrollen lesbar bleiben. Das verlangt WCAG 1.4.10 Reflow und scheitert meist an festen Pixelbreiten und an
overflow: hidden. - Bewegung braucht eine Abschaltung.
@media (prefers-reduced-motion: reduce)ist die Umsetzung, WCAG 2.2.2 der rechtliche Anker.
Womit du anfängst
Mit dem Einbinden von CSS. Dort steht, warum ein externes Stylesheet die Standardantwort ist und wo Inline-Styles später Arbeit verursachen. Danach folgen die Selektoren, weil jede Regel, die du je schreibst, mit einem Selektor beginnt und die Spezifität der häufigste Grund dafür ist, dass eine Regel nicht greift.
Für Layout gilt eine kurze Entscheidungsregel. Steht eine Reihe von Elementen nebeneinander oder untereinander, ist Flexbox das Werkzeug. Sollen Zeilen und Spalten zugleich stimmen, ist es Grid. Die häufigste Einzelaufgabe hat eine eigene Seite, weil sie in Dutzenden Varianten gesucht wird: Elemente zentrieren.
Wenn du eine bestehende Seite prüfen willst, gibt es einen schnellen Test. Stelle die Browser-Zoomstufe auf 400 Prozent bei 1280 Pixeln Fensterbreite. Bleibt der Text lesbar und läuft nichts horizontal aus dem Bild, ist das Layout robust. Erscheint eine waagerechte Bildlaufleiste oder verschwindet Text, findest du die Ursache meist unter overflow.
Wie dieser Bereich aufgebaut ist
Grundlagen klärt die beiden Dinge, die vor jedem Layout kommen. Das Einbinden behandelt <link>, <style> und das style-Attribut, dazu Pfade, Ladereihenfolge und Schriften. Die Selektoren behandeln Typ-, Klassen- und Attributselektoren, Kombinatoren, Pseudoklassen wie :focus-visible und :has() sowie die Spezifität mit Rechenbeispielen.
Layout ist der größte Teil. Flexbox ordnet entlang einer Achse und ist das Werkzeug für Navigationsleisten, Kartenreihen und alles, was sich nach Inhalt verteilt. Grid baut Zeilen und Spalten zugleich und ist das Werkzeug für Seitenraster und Kachelansichten. Elemente zentrieren sammelt die Lösungen für Text, Bild, Block und beide Achsen an einer Stelle. overflow behandelt überlaufenden Inhalt, Scroll-Container und das Abschneiden von Text.
Bewegung behandelt Animationen und Transitions: den Unterschied zwischen Zustandswechsel und eigenem Ablauf, @keyframes, die Eigenschaften, die der Browser flüssig darstellt, und die Pflichtabfrage prefers-reduced-motion.
CSS-Aufgaben im Überblick
Diese Tabelle sortiert die Eigenschaften nach der Aufgabe, für die man sie sucht.
| Aufgabe | Eigenschaften | Vertiefung |
|---|---|---|
| CSS einbinden | <link rel="stylesheet">, <style>, style-Attribut, @import |
CSS einbinden |
| Elemente auswählen | Typ, .klasse, #id, [attribut], >, +, ~, :is(), :has() |
Selektoren |
| Zustände gestalten | :hover, :focus-visible, :focus-within, :disabled, :checked |
Selektoren |
| Reihe anordnen | display: flex, justify-content, align-items, gap, flex-wrap |
Flexbox |
| Raster bauen | display: grid, grid-template-columns, fr, minmax(), repeat() |
Grid |
| Mittig setzen | text-align, margin-inline: auto, place-items: center |
Elemente zentrieren |
| Überlauf steuern | overflow, overflow-x, text-overflow, overflow-wrap |
overflow |
| Bewegung | transition, animation, @keyframes, transform, opacity |
Animationen |
| Systemeinstellungen | prefers-reduced-motion, prefers-color-scheme, forced-colors |
Animationen |
Was in dieser Tabelle fehlt, sind die veralteten Verfahren. Das <center>-Element, das border-Attribut an Tabellen und Layout mit float sind aus dem Standard entfernt oder durch bessere Werkzeuge abgelöst. Gestaltung im HTML-Markup gehört seit über zwanzig Jahren vollständig ins Stylesheet.
Warum dieser Bereich zu einer Seite über Barrierefreiheit gehört
Weil die Hälfte der prüfbaren Anforderungen im Stylesheet entschieden wird. Kontrastwerte, Fokus-Sichtbarkeit, Zoom-Verhalten, Textabstände, Bewegung und Zielgrößen sind allesamt CSS-Eigenschaften, und alle sechs stehen als Kriterium in der WCAG-Referenz. Eine Seite mit fehlerfreiem HTML kann durch drei Zeilen CSS unbedienbar werden. Das bekannteste Beispiel ist outline: none ohne Ersatz, das den Fokusring entfernt und damit gegen WCAG 2.4.7 Fokus sichtbar verstößt.
Der zweite Grund ist die Reihenfolge. HTML legt fest, in welcher Folge Screenreader vorlesen und der Tabulator springt. CSS kann diese Folge visuell umsortieren, ohne sie im Dokument zu ändern. Wer mit order in Flexbox oder mit freier Platzierung in Grid arbeitet, erzeugt genau dann eine Barriere, wenn die visuelle Reihenfolge Bedeutung transportiert. Das ist der häufigste Layout-Fehler moderner Seiten und der Grund, warum jede Layout-Seite hier einen eigenen Abschnitt zur Barrierefreiheit hat.
Diesen Zusammenhang zwischen Markup, Darstellung, Auffindbarkeit und Ladezeit behandelt Semantik, Barrierefreiheit, SEO und Performance im Detail.
Häufige Fragen
Was ist der Unterschied zwischen HTML und CSS?
HTML beschreibt, was ein Inhalt ist. Eine Überschrift, eine Liste, ein Formularfeld. CSS beschreibt, wie dieser Inhalt dargestellt wird. Schriftgröße, Farbe, Abstand, Anordnung. Assistive Technologien lesen die Bedeutung aus dem HTML, deshalb ersetzt CSS niemals das richtige Element. Ein mit CSS wie eine Überschrift gestalteter Absatz bleibt für einen Screenreader ein Absatz.
Brauche ich noch Flexbox, wenn es Grid gibt?
Ja, beide haben eigene Aufgaben. Flexbox verteilt Elemente entlang einer Achse und lässt den Inhalt die Größe bestimmen. Grid definiert ein Raster aus Zeilen und Spalten, in das die Elemente eingesetzt werden. In der Praxis kommen beide auf derselben Seite vor. Grid für das Seitenraster, Flexbox für die Elemente innerhalb einer Karte oder Leiste.
Welche CSS-Fehler verursachen die meisten Barrieren?
Vier kommen immer wieder vor. Der entfernte Fokusring durch outline: none, abgeschnittener Text durch overflow: hidden bei vergrößerter Schrift, feste Pixelbreiten, die bei 400 Prozent Zoom horizontales Scrollen erzwingen, und Animationen ohne prefers-reduced-motion. Alle vier sind in Minuten zu beheben und in Barrierefreiheit selbst testen beschrieben.
Wie prüfe ich mein CSS auf Barrierefreiheit?
In vier Schritten. Zoome auf 400 Prozent bei 1280 Pixeln Fensterbreite und prüfe auf horizontales Scrollen. Tabbe einmal durch die Seite und achte darauf, ob der Fokus sichtbar bleibt und der Reihenfolge im Text folgt. Prüfe die Kontrastwerte mit dem Kontrast-Check. Aktiviere in den Systemeinstellungen „Bewegung reduzieren“ und lade die Seite neu.
Gilt CSS auch für das BFSG?
Das Gesetz nennt keine Technik. Es verweist über die harmonisierte Norm EN 301 549 auf die WCAG, und viele dieser Kriterien werden im Stylesheet erfüllt oder verletzt. Kontrast, Zoom, Fokus und Bewegung sind CSS-Themen mit Rechtsbezug. Die Einordnung steht unter BFSG einfach erklärt. Dieser Hinweis ersetzt keine Rechtsberatung.
Verwandte Themen
- Semantisches HTML: das Markup, auf das CSS aufsetzt
- WCAG & BFSG: die Kriterien hinter den Anforderungen in diesem Bereich
- Barrierefreie Komponenten: wenn HTML und CSS allein nicht reichen
- Farbkontraste: Kontrastwerte richtig einstellen und prüfen
- Kontrast-Check: Werkzeug ohne Anmeldung
Quellen
- CSS Current Work (W3C: Stand aller CSS-Spezifikationen)
- CSS (MDN Web Docs: Referenz aller Eigenschaften und Selektoren)
- Understanding SC 1.4.10 Reflow (W3C: Anforderung an Layouts bei 320 Pixeln Breite)
- Understanding SC 2.4.7 Focus Visible (W3C: Anforderung an den sichtbaren Fokus)