Barrierefreie Website nach WCAG 2.1 AA: Was wir im Relaunch wirklich prüfen
Wie Sie eine bestehende Website nach WCAG 2.1 AA barrierefrei machen, wer unter das BFSG fällt und welche Prüfpunkte im Relaunch zählen.
- Nº
- 03
- Veröffentlicht
- Lesezeit
- 9 Min.
- Kategorie
- Notes
- Geschrieben von
- Revylio
Barrierefreie Website nach WCAG 2.1 AA: Bestand prüfen, im Relaunch beheben, offen dokumentieren
Eine barrierefreie Website nach WCAG 2.1 AA entsteht in vier Schritten. Zuerst prüfen Sie den Bestand. Dann beheben Sie Barrieren in Vorlagen und Komponenten und testen mit Werkzeugen und von Hand. Zum Schluss dokumentieren Sie das Ergebnis offen.
Für Unternehmen, die bestimmte Dienstleistungen für Verbraucher anbieten, etwa im Onlinehandel, gelten die Pflichten aus dem Barrierefreiheitsstärkungsgesetz seit dem 28. Juni 2025.
Eine barrierefreie Website ist ein Webangebot, das Menschen mit und ohne Behinderung gleichermaßen wahrnehmen, bedienen und verstehen können. Das gilt auch dann, wenn jemand ohne Maus oder mit Screenreader arbeitet. Ein Screenreader ist eine Software, die Bildschirminhalte vorliest.
Die Zielgruppe ist groß: Laut Statistischem Bundesamt lebten Ende 2021 rund 7,8 Millionen Menschen mit schwerer Behinderung in Deutschland. Das sind fast 10 % der Bevölkerung.
Der Unterschied zwischen Barrierefreiheit „auf dem Papier“ und in der Praxis liegt im Prüfverfahren. Ein automatischer Bericht kann fehlerfrei aussehen, obwohl das Kontaktformular für Tastaturnutzer unbenutzbar bleibt. Deshalb gehören zu jedem Relaunch neben dem Werkzeugbericht auch Tests mit Tastatur und Screenreader. Ebenso dazu gehört eine ehrliche Erklärung zur Barrierefreiheit.
Wer unter den European Accessibility Act und das BFSG fällt
Unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen vor allem Unternehmen, deren Website sich an Verbraucherinnen und Verbraucher richtet. Das BFSG setzt den European Accessibility Act (EAA) in deutsches Recht um. Der EAA ist eine EU-Richtlinie, die seit dem 27. Juni 2019 in Kraft ist und Barrierefreiheit europaweit angleichen soll.
Mit dem BFSG sind erstmals auch private Unternehmen verpflichtet, digitale Angebote gleichberechtigt zugänglich zu machen. Typischerweise betroffen sind diese Angebote:
- Onlineshops und andere Dienstleistungen im elektronischen Geschäftsverkehr,
- Bankdienstleistungen für Verbraucher,
- Telekommunikationsdienste,
- E-Books,
- Websites, Apps und elektronische Tickets im Personenverkehr.
Die Liste im Gesetz ist abschließend, aber weit gefasst. Unter die Dienstleistungen im elektronischen Geschäftsverkehr fällt jede Website oder App, über die Verbraucher einen Vertrag abschließen können. Das gilt unabhängig von der Branche.
Auch einfache Funktionen können deshalb relevant sein. Umstritten ist, ob bereits eine Online-Terminbuchung auf der Firmenwebsite genügt. Manche Stimmen bejahen das, wenn darüber ein Vertrag mit Verbrauchern zustande kommt.
Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten, also Unternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro. Reine B2B-Angebote sind nicht erfasst. Damit das nachvollziehbar ist, sollte beim Aufruf der Website eindeutig erkennbar sein, dass sie sich nur an Unternehmen richtet. Im Zweifel klären Sie die Einordnung rechtlich, bevor Sie den Umfang des Relaunchs festlegen.
Aufsicht und Bußgelder: Die Marktüberwachung der Länder prüft Websites
Die Einhaltung des BFSG überwacht die von den Ländern bestimmte Marktüberwachungsbehörde, für Dienstleistungen die gemeinsame Marktüberwachungsstelle der Länder. Sie prüft Websites in Stichproben und geht Beschwerden nach. Fehlende Barrierefreiheit kann also auffallen, ohne dass ein Kunde oder Wettbewerber aktiv wird.
Schon das Anbieten einer nicht barrierefreien Dienstleistung kann mit einem Bußgeld von bis zu 100.000 Euro geahndet werden. Werden Mängel trotz Aufforderung nicht behoben, kann die Behörde zudem anordnen, das Angebot der Dienstleistung einzustellen.
Für öffentliche Stellen gilt ein eigener, älterer Rahmen. Vor dem BFSG galten Pflichten zur barrierefreien Gestaltung von Websites nur für öffentliche Stellen, für Bundesbehörden nach dem Behindertengleichstellungsgesetz, für Landes- und Kommunalbehörden nach dem jeweiligen Landesrecht. Der Bundesbeauftragte für den Datenschutz und die Informationsfreiheit (BfDI) nennt in seiner Erklärung zur Barrierefreiheit der BfDI-Website das Behindertengleichstellungsgesetz (BGG) und die Barrierefreie-Informationstechnik-Verordnung (BITV) als Rechtsgrundlage.
Für Unternehmen bedeutet diese Aufsicht vor allem eines: Barrierefreiheit ist kein einmaliges Projekt. Jede neue Seite, jedes neue Formular und jedes eingebundene Fremdelement kann den erreichten Zustand wieder verschlechtern.
WCAG 2.1 AA als Prüfmaßstab: vier Prinzipien, 13 Richtlinien, drei Stufen
In der Praxis gilt WCAG 2.1 auf Stufe AA als maßgeblicher Prüfmaßstab für eine barrierefreie Website. Die Web Content Accessibility Guidelines (WCAG) sind internationale Standards für barrierefreie Webangebote. Sie stammen vom W3C und gliedern sich in vier Grundprinzipien, 13 Richtlinien und mehr als 70 Erfolgskriterien.
Jedes Kriterium gehört zu einer von drei Konformitätsstufen. Stufe A beschreibt das Minimum, AA das Soll und AAA das höchstmögliche Maß an Barrierefreiheit. Die europäische Norm EN 301 549 setzt die Erfolgskriterien der Stufen A und AA um.
Eine gesetzliche Konformitätsvermutung nach § 4 BFSG greift erst, wenn eine harmonisierte Norm zum European Accessibility Act im Amtsblatt der EU veröffentlicht ist. Die WCAG selbst sind kein Gesetz. Rechtlich relevant werden sie erst über Norm und Gesetz.
Die vier Prinzipien lassen sich direkt in Prüffragen für den Relaunch übersetzen:
| Prinzip | Kernfrage | Beispiel für einen Prüfpunkt |
|---|---|---|
| Wahrnehmbarkeit | Können alle Besucher die Inhalte erfassen? | Kontrast von mindestens 4,5:1 bei normalem Text, Untertitel und Audiobeschreibungen für Videos |
| Bedienbarkeit | Lässt sich alles ohne Maus steuern? | alle Funktionen per Tastatur, Navigations- und Suchhilfen |
| Verständlichkeit | Verstehen Besucher Texte und Abläufe? | klare Sprache, nachvollziehbare Formulare |
| Robustheit | Funktioniert die Seite mit Hilfstechnik? | stabiler Code, kompatibel mit Browsern und Screenreadern |
Bestandsaufnahme vor dem Relaunch: Seitenvorlagen, Formulare, Dokumente und Medien erfassen
Die Bestandsaufnahme einer bestehenden Website beginnt mit einer Liste aller Seitentypen, nicht aller Einzelseiten. Startseite, Produktseite, Artikel, Formular und Suchergebnis beruhen meist auf wenigen Vorlagen. Wer einen Fehler in der Vorlage behebt, behebt ihn auf allen Seiten, die sie nutzen.
Neben den Vorlagen gehören vier weitere Bereiche in die Bestandsaufnahme:
- alle Formulare, vom Kontaktformular bis zur Terminbuchung,
- alle Downloads, vor allem PDF-Dokumente,
- alle Videos und Audiodateien,
- alle eingebundenen Fremdelemente wie Captchas, Karten oder Chatfenster.
Für den ersten technischen Durchgang eignen sich Prüfwerkzeuge wie WAVE, axe oder Lighthouse. Sie finden technische Barrieren und Konformitätslücken schnell und wiederholbar. Wenn Sie ein externes Gutachten wünschen, gilt in Deutschland der BITV-Test der Initiative BIK als wichtigstes Prüfverfahren.
Am Ende der Bestandsaufnahme steht eine Entscheidung. Lässt sich die bestehende Website gezielt nachbessern, oder ist ein Neuaufbau wirtschaftlicher? Woran Sie das erkennen, beschreibt unser Beitrag darüber, wann sich ein Website-Relaunch lohnt.
Automatische Prüfwerkzeuge ersetzen keinen Test mit Tastatur und Screenreader
Automatische Prüfwerkzeuge bewerten Eigenschaften des Codes, nicht den Ablauf aus Sicht eines Menschen. Zu schwache Kontraste erkennen sie zuverlässig. Ob jemand ein Formular ohne Maus vollständig ausfüllen und absenden kann, prüfen sie dagegen nicht verlässlich.
Genau dort entsteht Barrierefreiheit auf dem Papier. Der Bericht ist grün, doch der wichtigste Weg der Website bleibt für einen Teil der Besucher blockiert. Bei Unternehmen ist dieser Weg meist die Anfrage, die Buchung oder der Kauf.
Bei Svennis gehen wir im Redesign jeden Formularweg allein mit der Tastatur durch, von der ersten Eingabe bis zur Bestätigungsseite. Danach wiederholen wir ihn mit einem Screenreader und werten erst dann einen Werkzeugbericht als bestanden.
Für Ihre eigenen Tests genügen drei Fragen je Ablauf:
- Erreichen Sie jedes Bedienelement mit der Tabulatortaste in sinnvoller Reihenfolge?
- Lässt sich jede Funktion mit der Tastatur auslösen, auch Auswahlfelder und Dialoge?
- Liest der Screenreader Beschriftungen, Fehlermeldungen und Bestätigungen verständlich vor?
Scheitert ein Ablauf an einer dieser Fragen, ist die Website an dieser Stelle nicht barrierefrei. Das gilt unabhängig davon, was der Werkzeugbericht anzeigt.
Prüfpunkte im Redesign: Kontrast, Tastaturbedienung, Videos, Sprache und robuster Code
Im Redesign einer barrierefreien Website setzen wir die Prüfpunkte dort an, wo Gestaltung und Technik entstehen: im Farbschema, in den Komponenten und in den Vorlagen. So wird Barrierefreiheit Teil des Entwurfs statt einer Nachbesserung kurz vor dem Start.
Kontrast festlegen, bevor Farben freigegeben werden
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text von mindestens 3:1. Diese Werte gehören in die Farbfreigabe des Designs. Werden sie erst im fertigen Code geprüft, muss oft das gesamte Farbschema neu abgestimmt werden.
Jede Funktion per Tastatur bedienbar
Menüs, Filter und Dialogfenster müssen vollständig per Tastatur funktionieren. Dazu kommen Navigations- und Suchhilfen, mit denen sich Besucher auf der Website orientieren.
Videos mit Untertiteln und Audiobeschreibung
Videos brauchen Untertitel und Audiobeschreibungen. Planen Sie beides schon bei der Produktion ein, nicht erst danach.
Verständliche Sprache
Viele Menschen in Deutschland haben Schwierigkeiten, komplexe Texte zu verstehen. Kurze Sätze, klare Begriffe und eindeutige Fehlermeldungen in Formularen helfen ihnen unmittelbar.
Robuster Code für Browser und Hilfstechnik
Robuster Code funktioniert in vielen Browsern und mit assistiver Software wie Screenreadern. Bei einem Website-Relaunch mit Revylio verankern wir diese Punkte in jeder Vorlage.
PDF-Dokumente und Captchas: Barrieren außerhalb der Seitenvorlagen
PDF-Dokumente und Captchas bleiben im Relaunch oft unbemerkt, weil sie nicht in den Seitenvorlagen stecken. Ein Captcha ist eine Abfrage, die Menschen von automatisierten Programmen unterscheiden soll. Wie verbreitet beide Probleme sind, zeigt selbst die Website einer Bundesbehörde.
Der BfDI benennt in seiner Erklärung offen, dass einige alte PDF-Dokumente nicht maschinenlesbar sind. Das betrifft insbesondere alte Tätigkeitsberichte. Dokumente ab 2020 sind maschinenlesbar, entsprechen aber nicht immer allen PDF/UA-Standards für zugängliche PDF-Dateien. Laut der Erklärung zur Barrierefreiheit des BfDI gilt das vor allem für Dokumente, die nicht ursprünglich vom BfDI erstellt wurden.
Ebenso nennt der BfDI ein JCAPTCHA unterhalb des Kontaktformulars, das nicht für alle Nutzerinnen und Nutzer wahrnehmbar ist. Ein barrierefreies Formular nützt wenig, wenn die letzte Abfrage vor dem Absenden scheitert.
Für den Relaunch folgt daraus eine klare Aufgabe. Entscheiden Sie für jedes PDF, ob Sie es barrierefrei neu erstellen, durch eine HTML-Seite ersetzen oder entfernen. Prüfen Sie jedes Captcha und jedes Fremdelement mit denselben Tastatur- und Screenreadertests wie Ihre eigenen Seiten.
Erklärung zur Barrierefreiheit: bekannte Lücken offenlegen und eine Kontaktstelle nennen
Eine Erklärung zur Barrierefreiheit beschreibt, wie zugänglich eine Website ist, welche Lücken bestehen und wo Besucher Mängel melden können. Die Erklärung des BfDI eignet sich als Vorbild, weil sie bekannte Probleme konkret benennt.
Der BfDI hat seine Erklärung am 9. Juni 2021 erstellt und seitdem aktualisiert. Sie räumt ein, dass in einigen Bereichen der Website kein barrierefreier Zugang möglich ist. Außerdem nennt sie die betroffenen Bereiche. Eine Erklärung, die nur Konformität behauptet, hilft niemandem, der auf eine Barriere stößt.
Ebenso wichtig ist ein Weg für Rückmeldungen. Beim BfDI melden Besucher Mängel an die Internetredaktion. Wer sich durch eine nicht ausreichend barrierefreie Gestaltung benachteiligt sieht, kann sich laut der Erklärung des BfDI an die Schlichtungsstelle nach dem Behindertengleichstellungsgesetz wenden. Seit dem BFSG können Verbraucherinnen und Verbraucher diese Stelle auch bei Barrieren auf Websites von Unternehmen anrufen.
Für Unternehmen lässt sich das Prinzip übertragen. Nennen Sie bekannte Lücken zusammen mit einem Plan zur Behebung. Geben Sie eine erreichbare Kontaktadresse an und halten Sie das Datum der letzten Prüfung aktuell. Dann deckt sich das Papier mit dem tatsächlichen Zustand der Website.
Nächste Schritte zur barrierefreien Website nach WCAG 2.1 AA
Die nächsten Schritte zur barrierefreien Website folgen einer festen Reihenfolge. Jeder Schritt baut auf dem vorherigen auf. Sie können ihn intern oder mit einem Dienstleister erledigen.
- Betroffenheit klären: Prüfen Sie, ob Sie Verbraucher ansprechen, online verkaufen oder Termine buchen lassen. Prüfen Sie auch, ob die Ausnahme für Kleinstunternehmen greift.
- Bestand erfassen: Listen Sie Seitenvorlagen, Formulare, PDF-Dokumente, Videos und Fremdelemente auf.
- Automatisch prüfen: Lassen Sie WAVE, axe oder Lighthouse über die wichtigsten Vorlagen laufen.
- Von Hand prüfen: Gehen Sie Anfrage, Buchung und Kauf mit Tastatur und Screenreader durch.
- In Vorlagen beheben: Korrigieren Sie Fehler im Design und in den Komponenten statt auf einzelnen Seiten.
- Offen dokumentieren: Veröffentlichen Sie die Pflichtinformationen nach Anlage 3 BFSG in Ihren AGB oder an anderer gut wahrnehmbarer Stelle. Dazu gehören eine allgemeine Beschreibung der Dienstleistung und Erläuterungen zu ihrer Durchführung. Hinzu kommen eine Beschreibung, wie sie die Barrierefreiheitsanforderungen erfüllt, und die zuständige Marktüberwachungsbehörde. Diese Informationen müssen selbst barrierefrei zugänglich sein. Nennen Sie außerdem einen Kontaktweg.
- Regelmäßig wiederholen: Prüfen Sie nach jeder größeren Änderung erneut, vor allem bei neuen Formularen.
Zeigt die Bestandsaufnahme, dass Nachbessern nicht reicht, finden Sie Ablauf und Leistungsumfang auf unserer Seite zu Website-Relaunch und Webdesign.