Barrierefreies Webdesign: WCAG und BFSG einfach erklärt

Fast jeder zehnte Mensch in Deutschland lebt mit einer anerkannten Schwerbehinderung, dazu kommen ältere Menschen mit nachlassender Sehkraft, Menschen mit vorübergehenden Einschränkungen wie einem gebrochenen Arm und alle, die gerade in grellem Sonnenlicht auf ihr Smartphone schauen. Barrierefreies Webdesign hilft ihnen allen. Es ist kein Spezialthema für wenige, sondern gutes Design für viele. Dieser Ratgeber erklärt die Grundlagen und die wichtigsten Maßnahmen.

Die WCAG: der internationale Maßstab

Die Web Content Accessibility Guidelines werden vom World Wide Web Consortium (W3C) herausgegeben. Version 2.1 ist Grundlage der europäischen Norm EN 301 549, auf die sich die gesetzlichen Pflichten beziehen, Version 2.2 ist seit 2023 der aktuelle Stand. Die Richtlinien sind in drei Konformitätsstufen eingeteilt: A, AA und AAA. In der Praxis gilt Stufe AA als Ziel.

Alle Anforderungen lassen sich vier Prinzipien zuordnen:

1. Wahrnehmbar: Informationen müssen mit mindestens einem Sinn erfassbar sein, etwa durch Alternativtexte für Bilder und Untertitel für Videos.
2. Bedienbar: Alles muss sich ohne Maus bedienen lassen, mit genug Zeit und ohne Inhalte, die Anfälle auslösen können.
3. Verständlich: Texte und Bedienung müssen nachvollziehbar sein, Fehler erkennbar und korrigierbar.
4. Robust: Der Code muss so sauber sein, dass auch assistive Technologien wie Screenreader ihn zuverlässig auslesen.

Kontraste

Der Kontrast zwischen Text und Hintergrund ist das häufigste Problem und zugleich am leichtesten zu messen.

Ein Kontrastverhältnis von 21 zu 1 entspricht Schwarz auf Weiß, 1 zu 1 bedeutet gleiche Farbe. Kostenlose Kontrastrechner zeigen den Wert für jedes Farbpaar an. Zusätzlich gilt: Informationen dürfen nicht nur über Farbe vermittelt werden. Ein Pflichtfeld, das nur rot markiert ist, erkennt eine Person mit Rot-Grün-Sehschwäche nicht. Ein Sternchen oder das Wort “Pflichtfeld” schafft Abhilfe. Mehr zu Farbwahl und Kontrasten steht unter Farbgestaltung.

Alternativtexte

Screenreader lesen Bilder über ihren Alternativtext vor. Ein guter Alternativtext beschreibt knapp, was das Bild im Zusammenhang aussagt, nicht jedes Detail. Ein Foto eines Teams beim Workshop braucht eine andere Beschreibung als dasselbe Foto in einem Artikel über Bürobeleuchtung. Rein dekorative Bilder bekommen ein leeres alt="", damit sie übersprungen werden. Grafiken mit Text, etwa Diagramme, brauchen die Information zusätzlich im Text oder in einer ausführlichen Beschreibung.

Tastaturbedienung und Fokus

Viele Menschen bedienen Websites ohne Maus, mit der Tastatur, einem Schalter oder Sprachsteuerung. Prüfen Sie deshalb:

• Lassen sich alle Links, Buttons, Menüs und Formularfelder mit der Tabulatortaste erreichen?
• Ist jederzeit sichtbar, welches Element den Fokus hat? Die Fokusmarkierung darf nicht per CSS entfernt werden, ohne Ersatz zu schaffen.
• Ist die Reihenfolge logisch, also wie die Leserichtung?
• Lassen sich Dialoge und Menüs mit der Escape-Taste schließen, und landet der Fokus danach wieder an einer sinnvollen Stelle?
• Gibt es einen Link “Zum Inhalt springen”, damit nicht auf jeder Seite die komplette Navigation durchlaufen werden muss?

Struktur und Semantik

Screenreader-Nutzer springen oft von Überschrift zu Überschrift. Eine saubere Gliederung mit genau einer Hauptüberschrift h1 und darunter logisch verschachtelten h2 und h3 ist deshalb wichtig. Überschriften sollten nach ihrer Bedeutung gewählt werden, nicht nach ihrer Größe. Ebenso gehören Navigation, Hauptinhalt und Fußbereich in die passenden HTML-Elemente, Listen in echte Listen und Tabellen mit Kopfzellen in echte Tabellen. Links brauchen aussagekräftige Texte: “Preisliste als PDF” statt “hier”.

Formulare

Formulare sind häufige Stolpersteine. Jedes Feld braucht eine sichtbare Beschriftung, die technisch mit dem Feld verknüpft ist. Platzhaltertext im Feld ersetzt keine Beschriftung, weil er beim Tippen verschwindet und oft zu blass ist. Fehlermeldungen sollten im Text sagen, was falsch ist und wie es richtig geht, und nicht nur das Feld rot färben.

Touch-Ziele und Bewegung

Schaltflächen müssen sich treffen lassen. Die WCAG 2.2 verlangen auf Stufe AA eine Zielgröße von mindestens 24 × 24 CSS-Pixeln oder ausreichend Abstand zu benachbarten Zielen, empfohlen werden für die Bedienung mit dem Finger eher 44 Pixel. Animationen sollten zurückhaltend sein und die Systemeinstellung für reduzierte Bewegung respektieren. Inhalte, die mehr als dreimal pro Sekunde blinken, sind tabu. Wie sich Layouts an kleine Bildschirme anpassen, erklärt der Ratgeber Responsive Webdesign.

Das Barrierefreiheitsstärkungsgesetz (BFSG)

Das BFSG setzt den European Accessibility Act in deutsches Recht um und gilt seit dem 28. Juni 2025. Es verpflichtet die Privatwirtschaft, bestimmte Produkte und Dienstleistungen barrierefrei anzubieten. Für Websites betrifft das vor allem:

• Dienstleistungen im elektronischen Geschäftsverkehr, also etwa Online-Shops und Buchungsstrecken, die sich an Verbraucherinnen und Verbraucher richten,
• Bankdienstleistungen für Verbraucher,
• E-Books und die dazugehörige Software,
• bestimmte Angebote im Personenverkehr und in der Telekommunikation.

Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen, also Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Reine Informations- und Unternehmenswebsites ohne Möglichkeit zum Vertragsabschluss fallen in der Regel nicht unter das Gesetz. Betroffene Anbieter müssen außerdem in einer Erklärung beschreiben, wie ihre Dienstleistung die Anforderungen erfüllt. Die Einhaltung überwachen Marktüberwachungsbehörden, bei Verstößen drohen Anordnungen und Bußgelder.

Für öffentliche Stellen gelten schon länger eigene Regeln, in Deutschland die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) und die Landesgesetze. Ob ein konkretes Angebot unter das BFSG fällt, sollte im Zweifel fachkundig geprüft werden. Diese Seite gibt einen Überblick, keine Rechtsberatung.

Schnelltest in zehn Minuten

1. Seite nur mit der Tastatur durchgehen: Ist der Fokus immer sichtbar?
2. Browser-Zoom auf 200 Prozent: Bleibt alles lesbar, ohne dass Inhalte abgeschnitten werden?
3. Kontrast der Fließtextfarbe mit einem Kontrastrechner prüfen.
4. Bilder auf Alternativtexte prüfen, etwa mit den Entwicklerwerkzeugen des Browsers.
5. Überschriftenstruktur mit einer Browsererweiterung anzeigen lassen.
6. Ein Formular absichtlich falsch ausfüllen: Sind die Fehlermeldungen verständlich?

Automatische Prüfprogramme finden nur einen Teil der Probleme. Für eine verlässliche Bewertung braucht es manuelle Tests, idealerweise auch mit Menschen, die assistive Technologien nutzen. Wie Schriftgrößen und Zeilenabstände zur Lesbarkeit beitragen, erklärt der Ratgeber Typografie im Web.