Barrierefreiheit wird fast immer als Phase behandelt: Man baut das Produkt, und am Ende lässt jemand einen Validator laufen und öffnet zwanzig Tickets. Genau diese Reihenfolge macht sie teuer. Wenn der Tastaturfokus kaputt ist, weil das Komponentensystem ihn nie berücksichtigt hat, ist die Behebung kein Ticket — sie ist ein Umbau der Interaktionsschicht.
In diesem Leitfaden geht es um das Gegenteil: welche Entscheidungen Sie beim Bauen treffen, damit der Validator am Ende nichts mehr zu sagen hat.
Die vier Prinzipien: POUR
WCAG ordnet alles um vier Ideen. Das sind keine bürokratischen Kategorien, sondern vier verschiedene Arten, wie jemand von Ihrer Website ausgeschlossen wird.
Wahrnehmbar. Inhalte müssen über mehr als einen Kanal ankommen. Ein Bild braucht Alternativtext, ein Video braucht Untertitel, und Farbe darf nicht der einzige Informationsträger sein — wenn sich ein Pflichtfeld nur dadurch abhebt, dass es rot ist, übersieht es etwa eine von zwölf Personen mit männlichem Sehvermögen.
Bedienbar. Alles, was mit der Maus geht, muss auch mit der Tastatur gehen. Keine Fokusfallen, keine unmöglichen Zeitlimits, keine Animationen, die vestibuläre Beschwerden auslösen.
Verständlich. Deklarierte Sprache, vorhersehbares Verhalten und Fehler, die erklären, was schiefging und wie man es behebt. «Fehler im Formular» ist keine Meldung, sondern eine Kapitulation.
Robust. Das Markup muss von assistiven Technologien interpretierbar sein. Hier gewinnt semantisches HTML immer gegen divs mit onclick.
Stufen A, AA und AAA
Drei Konformitätsstufen. In der Praxis zählt nur eine.
- A ist das absolute Minimum. Nur A zu erfüllen schließt viele Menschen aus und genügt praktisch keiner Regulierung.
- AA ist der reale Standard. Das verlangt die europäische Regulierung, danach fragen öffentliche Ausschreibungen, und das wird geprüft.
- AAA ist ein Ideal. Das W3C selbst sagt, dass es unrealistisch ist, sie für sämtliche Inhalte einer Website zu fordern.
Arbeiten Sie immer gegen AA. Wer «Barrierefreiheit» ohne Stufenangabe verlangt, verlangt AA.
Was WCAG 2.2 ergänzt
WCAG 2.2 ist seit Oktober 2023 W3C-Empfehlung. Sie ist additiv: Sie behält alles aus 2.1 und ergänzt neun Kriterien (ein Kriterium aus 2.1, 4.1.1 zum Parsing, wurde obsolet). Sechs der neuen sind Stufe AA. Diese werden am häufigsten verletzt:
2.4.11 — Fokus nicht verdeckt. Beim Navigieren mit der Tabulatortaste darf das fokussierte Element nicht verdeckt werden. Der übliche Verursacher ist ein fixierter Header: Sie tabben, der Fokus wandert zu einem Link direkt darunter, und optisch verschwindet er. Zu beheben mit scroll-margin-top auf fokussierbaren Elementen.
2.5.7 — Ziehbewegungen. Jede Funktion, die auf Ziehen beruht, braucht eine Alternative mit einem einzigen Zeiger. Eine Drag-and-drop-Sortierung braucht zusätzlich Hoch- und Runter-Buttons. Ein Preis-Slider braucht zusätzlich Zahlenfelder.
2.5.8 — Zielgröße (Minimum). Touch-Ziele müssen mindestens 24×24 CSS-Pixel groß sein, mit Ausnahmen für Inline-Links im Fließtext. Der Klassiker ist das Schließen-Icon eines Modals: 16 Pixel, in die Ecke gequetscht.
3.3.8 — Barrierefreie Authentifizierung. Sie dürfen für die Anmeldung keinen kognitiven Test verlangen. Das heißt: Einfügen ins Passwortfeld erlauben, Passwortmanager nicht blockieren und kein Rätsel erzwingen. Ein «Wähle alle Ampeln»-CAPTCHA ohne Alternative verletzt dieses Kriterium.
3.2.6 — Konsistente Hilfe und 3.3.7 — Redundante Eingabe. Der Zugang zur Hilfe muss auf allen Seiten an derselben Stelle sitzen, und dieselbe Angabe darf innerhalb eines Vorgangs nicht zweimal verlangt werden, sofern sie nicht zwingend nötig ist.
Die fünf Fehler aus fast jedem Audit
- Zu geringer Kontrast. Hellgrauer Text auf Weiß. Das AA-Minimum ist 4,5:1 für normalen und 3:1 für großen Text. Grau
#999auf Weiß ergibt 2,85:1 — durchgefallen. - Bilder ohne brauchbare Alternative.
alt="Bild"ist schlimmer als gar nichts. Ist das Bild dekorativ, lautet die richtige Antwortalt="". - Formularfelder ohne zugeordnetes Label. Ein Placeholder ist kein Label: Er verschwindet beim Tippen, und viele Screenreader sagen ihn nicht an.
- Unsichtbarer Fokus. Jemand hat
outline: noneins Basis-CSS geschrieben und nie etwas ersetzt. Tastaturnavigation wird zum Raten. - Überschriften nach Größe gewählt. Ein
h4, das genommen wurde, weil es «gut aussah», zerstört die Gliederung, mit der Screenreader-Nutzende die Seite navigieren.
Wie man richtig prüft
Beginnen Sie automatisiert, das ist billig: axe DevTools oder Lighthouse liefern in einer Minute Kontrastprobleme, fehlende Attribute und Hierarchiefehler. Aber seien Sie sich der Grenze bewusst: Automatische Tools erkennen rund ein Drittel der realen Probleme. Sie können nicht wissen, ob Ihr alt das Bild beschreibt oder ob die Tab-Reihenfolge sinnvoll ist.
Was den Rest findet:
- Gehen Sie die ganze Seite mit der Tabulatortaste durch. Ohne Maus. Sieht man immer, wo man ist? Kommen Sie aus jedem Modal heraus? Folgt die Reihenfolge dem visuellen Lesefluss?
- Schalten Sie einen Screenreader ein. VoiceOver gehört zu macOS und iOS, NVDA ist unter Windows kostenlos. Eine halbe Stunde blind durch das eigene Produkt lehrt mehr als jeder Report.
- Zoomen Sie auf 200%. Es ist ein AA-Kriterium und zerlegt mehr Layouts als gedacht.
Die richtige Reihenfolge
Barrierefreiheit ist günstig, wenn sie auf Komponentenebene entschieden wird, und teuer, wenn sie Bildschirm für Bildschirm geflickt wird. Wenn Button, Formularfeld und Modal sauber gelöst sind, haben Sie bereits 80% jedes darauf gebauten Screens gelöst. Genau das ist das Argument für ein Designsystem: Barrierefrei-by-default wird vererbt.
Und es gibt einen weiteren Grund, es nicht ans Ende zu schieben: Seit Juni 2025 ist ein großer Teil des digitalen Handels und der digitalen Dienstleistungen in der EU gesetzlich verpflichtet. Der European Accessibility Act setzt die Untergrenze und verweist auf die EN 301 549, die ihrerseits auf WCAG Stufe AA zeigt — dieselbe Stufe, um die es in diesem Artikel geht.
Wollen Sie wissen, wo Ihre Website steht? In der Webentwicklung behandeln wir Barrierefreiheit als Teil des Prozesses, nicht als Audit in letzter Minute.