Ein Großkunde hat in seinen Lieferantenfragebogen eine neue Frage aufgenommen: „Erfüllen Ihre Website und Ihr Onlineshop die aktuellen Anforderungen an die Barrierefreiheit?“ Sie leiten die Frage an die Agentur weiter, die Ihre Website gebaut hat, und bekommen zur Antwort: „Keine Sorge, die Seite ist responsiv.“ Das ist nicht dasselbe. Wenn jemand mit Screenreader an Ihrer Kasse ankommt und der Button „Weiter“ nur ein Pfeilsymbol ohne Text ist, bleibt die Website für diese Person verschlossen, so gut sie auch aussieht.
In diesem Beitrag geht es um Barrierefreiheit im Web von Grund auf: was WCAG 2.2 ist und was neu dazukam, den European Accessibility Act, das Barrierefreiheitsstärkungsgesetz (BFSG), die Lage in Österreich und der Schweiz, die häufigsten Fehler und ihre Behebung, Testwerkzeuge, die Erklärung zur Barrierefreiheit und warum Plugins, die „Konformität mit einer Zeile Code“ versprechen, genau das nicht liefern.
Für wen ist Barrierefreiheit, und warum gerade jetzt?
Eine barrierefreie Website lässt sich auch von Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen nutzen. Die blinde Kundin mit Screenreader, der Nutzer, der keine Maus bedienen kann und sich per Tastatur bewegt, der gehörlose Besucher Ihres Produktvideos, die ältere Kundin, die kleine graue Schrift nicht lesen kann: Sie alle gehören zu Ihrer Zielgruppe. Wer gerade einen Gipsarm hat, gehört eine Zeit lang auch dazu.
Lange galt das Thema als „nice to have“. Inzwischen hat es feste Termine. Seit dem 28. Juni 2025 gilt in der EU der European Accessibility Act, in Deutschland umgesetzt durch das BFSG, und er erfasst unter anderem den Onlinehandel mit Verbrauchern. Wer an Endkunden verkauft, muss sich also nicht mehr fragen, ob, sondern wie gut die eigene Website barrierefrei ist.
WCAG 2.2: was es ist, welche Stufe und was neu ist
Die Web Content Accessibility Guidelines (WCAG) des W3C sind der technische Standard, auf dem fast alle Barrierefreiheitsvorschriften weltweit beruhen. Die aktuelle Fassung WCAG 2.2 ist seit dem 5. Oktober 2023 W3C-Empfehlung und wurde im Oktober 2025 als internationale Norm ISO/IEC 40500:2025 bestätigt.
WCAG beruht auf vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Darunter stehen Erfolgskriterien in den Stufen A, AA und AAA. Gesetze und Verträge verlangen fast immer AA, also die Erfüllung aller A- und AA-Kriterien. AAA ist die höchste Stufe; das W3C empfiehlt nicht, sie für ganze Websites vorzuschreiben.
WCAG 2.2 hat neun neue Erfolgskriterien hinzugefügt. Diese betreffen die Stufen bis AA und damit die Konformität:
- 2.4.11 Fokus nicht verdeckt (Minimum), AA: Ein per Tastatur fokussiertes Element darf nicht vollständig von eigenen Inhalten wie einer fixierten Kopfzeile oder dem Cookie-Banner verdeckt werden.
- 2.5.7 Ziehbewegungen, AA: Alles, was per Ziehen funktioniert (Schieberegler, Sortieren, Karten), muss auch mit einem einfachen Klick oder Tippen gehen.
- 2.5.8 Zielgröße (Minimum), AA: Klickziele sind mindestens 24 mal 24 CSS-Pixel groß oder haben genug Abstand; Ausnahmen gelten etwa für Links im Fließtext.
- 3.2.6 Konsistente Hilfe, A: Erscheinen Hilfeangebote wie Kontaktdaten, Chat oder Hilfe-Link auf mehreren Seiten, stehen sie dort in derselben relativen Reihenfolge.
- 3.3.7 Redundante Eingaben, A: Was im selben Vorgang bereits eingegeben wurde, wird automatisch übernommen oder steht zur Auswahl. Die Checkbox „Rechnungsadresse wie Lieferadresse“ ist die klassische Lösung.
- 3.3.8 Barrierefreie Authentifizierung (Minimum), AA: Ein kognitiver Test wie das Merken eines Passworts oder ein Rätsel darf nicht der einzige Weg zur Anmeldung sein. Felder, die ein Passwortmanager ausfüllen kann und die Einfügen erlauben, oder ein Anmeldelink per E-Mail erfüllen das Kriterium.
Die drei übrigen neuen Kriterien (die erweiterte Fassung von „Fokus nicht verdeckt“, das Fokus-Erscheinungsbild und die erweiterte Fassung der barrierefreien Authentifizierung) gehören zur Stufe AAA. Gestrichen wurde 4.1.1 Syntaxanalyse, da überholt. Wer WCAG 2.2 erfüllt, erfüllt auch 2.1 und 2.0.
Der European Accessibility Act: Geltungsbereich, Fristen, Ausnahmen
Der European Accessibility Act ist eigentlich kein Gesetz, sondern die Richtlinie (EU) 2019/882. Die Mitgliedstaaten haben sie in nationales Recht umgesetzt, und seit dem 28. Juni 2025 gelten die Regeln. Erfasst sind bestimmte Produkte und Dienstleistungen:
- Produkte: Computer und Betriebssysteme für Verbraucher, Smartphones, Zahlungsterminals, Geldautomaten, Fahrkarten- und Check-in-Automaten, E-Book-Reader.
- Dienstleistungen: elektronische Kommunikation, Zugang zu audiovisuellen Mediendiensten, Websites, Apps und E-Tickets im Personenverkehr per Flugzeug, Bus, Bahn und Schiff, Bankdienstleistungen für Verbraucher, E-Books und der elektronische Geschäftsverkehr.
Für die meisten Unternehmen zählt der letzte Punkt. Die Richtlinie versteht darunter Dienstleistungen, die über Websites und mobile Apps auf individuelle Anfrage eines Verbrauchers im Hinblick auf einen Verbrauchervertrag erbracht werden. Ein Onlineshop für Endkunden, eine Hotelwebsite mit Buchung oder eine App mit Abo-Verkauf fällt darunter. Ein reines B2B-Portal fällt in aller Regel nicht unter diese Definition.
Die Details, über die viele stolpern:
- Die Ausnahme für Kleinstunternehmen gilt nur für Dienstleistungen. Gemeint sind Unternehmen mit weniger als zehn Beschäftigten, deren Jahresumsatz oder Jahresbilanzsumme unter der in der Richtlinie festgelegten Schwelle liegt. Wer als Kleinstunternehmen erfasste Produkte in Verkehr bringt, hat lediglich geringere Dokumentationspflichten.
- Es gibt Übergangsfristen. Vor dem 28. Juni 2025 geschlossene Dienstleistungsverträge dürfen bis zu ihrem Ablauf unverändert weiterlaufen, höchstens fünf Jahre lang. Produkte, die ein Dienstleister schon vorher rechtmäßig eingesetzt hat, darf er bis zum 28. Juni 2030 weiter nutzen.
- Würde eine Anforderung das Produkt oder die Dienstleistung grundlegend verändern oder eine unverhältnismäßige Belastung bedeuten, ist eine Ausnahme möglich. Die Beurteilung muss aber dokumentiert und aufbewahrt werden; Zeit- oder Wissensmangel zählt nicht.
- Dienstleister müssen erklären, wie ihre Dienstleistung die Anforderungen erfüllt, und zwar in barrierefreier Form, etwa in den AGB oder einem gleichwertigen Dokument.
Technisch stützt sich die Richtlinie für die Konformitätsvermutung auf die harmonisierte Norm EN 301 549. Die derzeit maßgebliche Fassung 3.2.1 beruht auf WCAG 2.1 AA. Die am 2. September 2026 veröffentlichte Fassung 4.1.1 stellt Webinhalte auf WCAG 2.2 AA um und wird maßgeblich, sobald sie im Amtsblatt der EU genannt ist. Für die Praxis heißt das: Wer heute eine neue Website baut, sollte WCAG 2.2 AA anpeilen.
BFSG in Deutschland, Österreich, Schweiz
Deutschland: das Barrierefreiheitsstärkungsgesetz
Deutschland hat die Richtlinie mit dem BFSG vom 16. Juli 2021 umgesetzt; die Einzelheiten zu den Anforderungen regelt die zugehörige Verordnung (BFSGV). Das Gesetz gilt seit dem 28. Juni 2025. Die Marktüberwachung übernimmt die gemeinsame Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) mit Sitz in Magdeburg.
Nach § 3 Abs. 3 BFSG sind Kleinstunternehmen, die Dienstleistungen anbieten, von den Barrierefreiheitsanforderungen ausgenommen; für sie bietet die Bundesfachstelle Barrierefreiheit Beratung an. Dienstleister müssen nach § 14 BFSG die in der Anlage zum Gesetz genannten Informationen für die Allgemeinheit in barrierefreier Form zugänglich machen und so lange aufbewahren, wie sie die Dienstleistung anbieten. Ob und wie Verstöße zusätzlich wettbewerbsrechtlich verfolgt werden können, ist eine Frage für Ihre Rechtsberatung.
Österreich und Schweiz
Österreich hat die Richtlinie mit dem Barrierefreiheitsgesetz (BaFG) umgesetzt, das ebenfalls seit dem 28. Juni 2025 gilt; die Marktüberwachung liegt beim Sozialministeriumservice. Die Schweiz ist nicht an die Richtlinie gebunden. Schweizer Unternehmen, die Verbrauchern in der EU Produkte oder Dienstleistungen anbieten, können aber trotzdem unter die Regeln des jeweiligen Mitgliedstaats fallen.
Wer außerhalb Europas verkauft
In den USA gibt es für Websites privater Unternehmen keinen bundesweiten technischen Standard, Gerichte wenden aber Titel III des ADA auch auf Websites an, und Klagen sind häufig. Im Vereinigten Königreich verpflichtet der Equality Act 2010 Anbieter zu angemessenen Vorkehrungen für Kunden mit Behinderung. Beides spricht für dasselbe Ziel: WCAG 2.2 AA.
Die häufigsten Fehler und wie man sie behebt
Die meisten Befunde aus unseren Prüfungen lassen sich wenigen Kategorien zuordnen und schon im Design vermeiden.
Alternativtexte
Jedes Bild mit Informationsgehalt braucht einen Alternativtext für Screenreader. Beim Produktfoto also nicht „Produktbild“, sondern „Dunkelblaues Leinenhemd mit Button-down-Kragen, langarm“. Rein dekorative Bilder erhalten einen leeren Alternativtext (alt=""), sonst liest der Screenreader jede Trennlinie vor.
Farbkontrast
WCAG AA verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, für großen Text (etwa 24 Pixel oder rund 18,7 Pixel fett) mindestens 3:1. Auch Button-Umrisse, Rahmen von Formularfeldern und bedeutungstragende Symbole brauchen 3:1. Hellgrauer Text auf Weiß ist der Fehler, den wir am häufigsten finden. Und verlassen Sie sich nicht allein auf Farbe: Pflichtfelder nur rot zu markieren, sagt farbenblinden Menschen nichts.
Tastatur und Fokus
Alles muss sich allein mit der Tastatur bedienen lassen: Menüs, Pop-ups, Tabs, Schieberegler, der Kassenprozess. Wer mit der Tastatur navigiert, muss sehen, wo er gerade ist; der Fokusindikator muss also sichtbar sein. Wer den Fokusrahmen entfernt, weil er „hässlich aussieht“, schaltet Tastaturnutzern das Licht aus. Ein Dialog nimmt beim Öffnen den Fokus auf, gibt ihn beim Schließen an den Ausgangspunkt zurück, und niemand darf in einem Element gefangen bleiben.
Formularbeschriftungen und Fehlermeldungen
Jedes Feld braucht eine sichtbare, im Code verknüpfte Beschriftung; Platzhaltertext allein genügt nicht. Fehlermeldungen nennen das Feld, den Fehler und den Weg zur Korrektur. Pflichtfelder werden visuell und im Code gekennzeichnet.
Video und Audio
Aufgezeichnete Videos brauchen auf Stufe A Untertitel und auf Stufe AA eine Audiodeskription. Automatische Untertitel sind ein Anfang, Namen und Fachbegriffe sollten Sie vor der Veröffentlichung korrigieren. Für Podcasts und reine Audioinhalte gehört ein Transkript dazu.
Struktur und Sprache
Überschriften folgen der Hierarchie, nicht der gewünschten Schriftgröße; Screenreader-Nutzer springen von Überschrift zu Überschrift. Statt „hier klicken“ nennt der Linktext das Ziel. Geben Sie die Seitensprache mit dem lang-Attribut an, sonst liest der Screenreader Ihre deutsche Seite mit englischer Aussprache vor.
Testen: Werkzeuge, Screenreader und Ein-Minuten-Checks
Automatische Werkzeuge sind ein guter Einstieg: axe DevTools und WAVE von WebAIM als Browser-Erweiterungen, dazu Lighthouse in den Chrome-Entwicklertools. Sie finden fehlende Alternativtexte, unbeschriftete Felder und Kontrastprobleme in Sekunden. Ob ein Alternativtext sinnvoll ist, ob die Fokusreihenfolge logisch ist oder ob eine Fehlermeldung verständlich ist, können sie nicht beurteilen. 100 Punkte in Lighthouse bedeuten nicht, dass die Website barrierefrei ist.
Deshalb führt an manuellen Tests kein Weg vorbei. Gehen Sie Ihre wichtigsten Abläufe mit mindestens einem Screenreader durch: NVDA als Open-Source-Lösung unter Windows, VoiceOver auf Mac und iPhone, TalkBack unter Android. Die folgende Tabelle enthält Prüfungen, die jeweils etwa eine Minute dauern:
| Kriterium | Was es bedeutet | Ein-Minuten-Test |
|---|---|---|
| 1.1.1 Nicht-Text-Inhalt (A) | Bilder mit Information brauchen eine Textalternative | WAVE starten und nach fehlenden oder sinnlosen Alt-Texten wie „Bild“ suchen |
| 1.4.3 Kontrast Minimum (AA) | Mindestens 4,5:1 für normalen, 3:1 für großen Text | Hellgrauen Text mit einem Kontrastprüfer messen |
| 1.4.10 Umbruch (AA) | Inhalte bei 320 CSS-Pixeln Breite ohne horizontales Scrollen lesbar | Browser auf 400 Prozent zoomen und auf seitliches Scrollen achten |
| 2.1.1 Tastatur (A) | Jede Funktion ist per Tastatur nutzbar | Maus weglegen und mit Tab und Enter ein Produkt in den Warenkorb legen |
| 2.4.7 Fokus sichtbar (AA) | Der Tastaturfokus ist jederzeit zu sehen | Mit Tab durch die Seite gehen und prüfen, ob der Fokus je verschwindet |
| 2.4.11 Fokus nicht verdeckt (AA) | Fokussierte Elemente liegen nicht unter fixierten Bereichen | Ans Seitenende tabben und prüfen, ob das Cookie-Banner den Fokus verdeckt |
| 2.5.7 Ziehbewegungen (AA) | Zum Ziehen gibt es eine Alternative mit einfachem Zeigen | Preisregler oder Sortierung ohne Ziehen verändern |
| 2.5.8 Zielgröße (AA) | Ziele mindestens 24 mal 24 CSS-Pixel oder mit Abstand | Kleine Symbole und Links am Smartphone mit dem Daumen antippen |
| 3.3.7 Redundante Eingaben (A) | Dieselbe Angabe wird im selben Vorgang nicht zweimal verlangt | Prüfen, ob der Checkout die Adresse ein zweites Mal abfragt |
| 3.3.8 Barrierefreie Authentifizierung (AA) | Merken oder Rätseln ist nicht der einzige Weg zur Anmeldung | Prüfen, ob man ins Passwortfeld einfügen kann und der Passwortmanager es füllt |
Erklärung zur Barrierefreiheit und Informationspflichten
Eine Erklärung zur Barrierefreiheit beschreibt, welchem Standard Ihre Website in welchem Umfang folgt, nennt bekannte Mängel und zeigt, wie Nutzer Probleme melden können. Öffentliche Stellen kennen sie seit Langem aus der BITV 2.0. Für Unternehmen im Geltungsbereich des BFSG lassen sich die nach § 14 BFSG geforderten Informationen über die Dienstleistung gut auf einer solchen Seite bündeln, die von jeder Seite aus erreichbar ist.
Eine gute Erklärung enthält den angestrebten Standard (WCAG 2.2 AA), den aktuellen Stand, bekannte Mängel samt Plan zur Behebung, eine verständliche Beschreibung der Barrierefreiheitsmerkmale, E-Mail-Adresse und Telefonnummer für Rückmeldungen, die zuständige Marktüberwachungsbehörde und das Datum der letzten Überprüfung. Eine ungeprüfte Behauptung wie „unsere Website ist vollständig barrierefrei“ ist schlechter als gar keine Erklärung.
Warum Overlay-Plugins keine Konformität herstellen
Werkzeuge, die mit einer Zeile Code „sofortige Barrierefreiheit“ versprechen, sogenannte Overlays, sind weit verbreitet. Ein Symbol in der Ecke öffnet Optionen wie größere Schrift oder höheren Kontrast.
Das Problem: Sie reparieren Ihren Quellcode nicht. Das unbeschriftete Formularfeld, das Menü, das sich nicht per Tastatur öffnen lässt, der sinnlose Alternativtext bleiben, wo sie sind. Screenreader-Nutzer haben ihre Hilfsmittel längst nach eigenen Bedürfnissen eingerichtet, und manche Overlays kommen ihnen in die Quere. In den USA hat die Handelsbehörde FTC die Behauptung von accessiBe, das eigene automatisierte Produkt könne jede Website WCAG-konform machen, als unbelegt eingestuft und im April 2025 einen Vergleich mit Zahlungspflicht bestätigt. Ein Overlay nimmt Ihnen die Pflichten nicht ab; es überdeckt das Problem nur.
Wo fangen Sie an?
- Klären Sie den Geltungsbereich: Verkaufen Sie an Verbraucher in der EU, und gilt für Sie die Ausnahme für Kleinstunternehmen? Halten Sie die Antwort mit Ihrer Rechtsberatung schriftlich fest.
- Wählen Sie Ihre fünf wichtigsten Abläufe: Startseite, Produkt- oder Leistungsseite, Kontaktformular, Checkout, Login.
- Prüfen Sie diese Abläufe automatisiert mit axe oder WAVE und notieren Sie die Befunde.
- Führen Sie die Ein-Minuten-Checks aus der Tabelle an denselben Abläufen durch und spielen Sie mindestens einen davon komplett mit Screenreader durch.
- Sortieren Sie die Probleme nach Wirkung. Was eine Aufgabe komplett blockiert, etwa ein per Tastatur nicht abschließbarer Checkout, kommt zuerst.
- Beheben Sie Fehler im Designsystem statt Seite für Seite: Farbpalette, Fokusstil, Formularkomponenten, Buttongrößen.
- Schreiben Sie Ihre Erklärung zur Barrierefreiheit und sorgen Sie dafür, dass der Rückmeldeweg wirklich funktioniert.
- Geben Sie dem Redaktionsteam eine kurze Checkliste: Alternativtexte, Überschriftenfolge, Linktexte, Untertitel. Barrierefreiheit ist kein einmaliges Projekt, sondern eine Gewohnheit.
Bei AYTE Digital gehört Barrierefreiheit vom ersten Entwurf an zur Arbeit; bei bestehenden Websites beginnen wir mit einer Bestandsaufnahme der hier beschriebenen Abläufe und priorisieren die Korrekturen gemeinsam mit Ihnen. Wenn Sie nicht wissen, wo Sie anfangen sollen, ist die Seite mit dem meisten Umsatz ein guter erster Kandidat.
