WCAG 2.1 AA: Was der Standard für das BFSG bedeutet

Wer in Deutschland eine Website oder einen Onlineshop betreibt, begegnet im Zusammenhang mit dem Barrierefreiheitsstärkungsgesetz (BFSG) häufig der Bezeichnung WCAG 2.1 AA. Dahinter steckt kein Gütesiegel, sondern ein technischer Maßstab: Er beschreibt überprüfbare Anforderungen, die digitale Inhalte für Menschen mit unterschiedlichen Behinderungen zugänglicher machen.

Für die Praxis ist vor allem wichtig, diese Anforderungen zu verstehen. Kann jemand Ihren Shop ohne Maus bedienen? Werden Fehlermeldungen verständlich ausgegeben? Bleiben Inhalte bei Vergrößerung nutzbar? Die vier Grundprinzipien der WCAG helfen, solche Fragen systematisch zu beantworten. Dabei lohnt sich eine klare Trennung zwischen gesetzlichen Anforderungen, technischen Standards und der tatsächlichen Nutzung einer Website.

BFSG, EN 301 549 und WCAG 2.1 AA: Was gehört zusammen?

Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025. Für Unternehmen in Deutschland bildet es den gesetzlichen Bezugspunkt dieser Diskussion. Ob und welche Anforderungen für Ihr konkretes Angebot gelten, muss jedoch gesondert geklärt werden. Aus der bloßen Existenz einer Unternehmenswebsite lässt sich das nicht ableiten.

Die europäische Norm EN 301 549 beschreibt technische Anforderungen an die Barrierefreiheit von Informations- und Kommunikationstechnik. Für Webinhalte greift sie auf WCAG-Anforderungen zurück. Dadurch entsteht die Verbindung zwischen einem breiteren Anforderungsrahmen und konkreten technischen Prüfpunkten für Websites.

Die WCAG 2.1, ausgeschrieben Web Content Accessibility Guidelines, konzentrieren sich auf die Zugänglichkeit von Webinhalten. Sie beschreiben beispielsweise, wie Informationen wahrnehmbar bleiben und wie interaktive Elemente bedienbar sein sollen. Die EN 301 549 ist dabei nicht einfach ein anderer Name für die WCAG: Ihr Gegenstand reicht über Webinhalte hinaus.

Für Ihr Unternehmen heißt das: Ein WCAG Audit kann technische Barrieren sichtbar machen und Verbesserungen strukturieren. Es beantwortet aber nicht automatisch sämtliche Fragen zum BFSG. Die Prüfung eines technischen Standards und die rechtliche Bewertung Ihres Angebots sind miteinander verbunden, jedoch nicht identisch.

Die zuständige Marktüberwachungsbehörde ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF). Ihre offiziellen Informationen sind ein sinnvoller Ausgangspunkt für Fragen zur Marktüberwachung.

Was bedeutet das Konformitätsniveau AA?

Die WCAG ordnen ihre Erfolgskriterien den Niveaus A, AA und AAA zu. Diese Niveaus bauen aufeinander auf. WCAG 2.1 AA umfasst sowohl die Kriterien des Niveaus A als auch die des Niveaus AA. Es genügt also nicht, nur die ausdrücklich mit AA gekennzeichneten Kriterien zu betrachten.

AA ist keine durchschnittliche Bewertung und kein Punktestand, bei dem gute Ergebnisse einzelne Barrieren ausgleichen. Für eine Konformitätsbewertung müssen die anwendbaren Kriterien innerhalb des bewerteten Umfangs erfüllt sein. Eine unbedienbare Schaltfläche wird nicht dadurch weniger problematisch, dass alle Bilder gute Alternativtexte besitzen.

AAA umfasst weitergehende Kriterien. Zugleich bedeutet AA nicht, dass jede denkbare Nutzungshürde verschwunden ist. Auch jenseits einer formalen Prüfung können Rückmeldungen von Menschen mit Behinderungen wichtige Verbesserungen anstoßen.

Für einen Shop sollte der Blick außerdem nicht auf der Startseite enden. Produktauswahl, Varianten, Warenkorb und Bestellprozess gehören zu einem zusammenhängenden Nutzungsvorgang. Eine barrierearme Einstiegsseite hilft wenig, wenn sich später die Lieferadresse nicht eingeben lässt.

Wahrnehmbar: Informationen müssen zugänglich ankommen

Das erste Prinzip fragt, ob Menschen Informationen überhaupt erfassen können. Nicht alle sehen Bilder, unterscheiden Farben oder hören Ton. Wichtige Inhalte brauchen deshalb eine geeignete Darstellung oder Alternative.

Beispiel: Produktbilder und Sonderangebote

Ein aussagekräftiges Produktbild benötigt einen Alternativtext, der seine relevante Information im jeweiligen Kontext vermittelt. Bei einer Tasche kann das etwa die Form oder ein besonderes Verschlusssystem sein. Eine rein dekorative Hintergrundgrafik sollte dagegen nicht mit unnötigen Beschreibungen die Sprachausgabe unterbrechen.

Auch ein Angebot darf nicht ausschließlich durch rote Schrift erkennbar sein. Ein zusätzlicher Hinweis wie „Reduziert“ vermittelt die Bedeutung unabhängig von der Farbwahrnehmung. Ausreichende Kontraste helfen außerdem dabei, Text und Bedienelemente vom Hintergrund zu unterscheiden.

• Prüfen Sie, welche Aussage ein Bild vermittelt, statt automatisch den Dateinamen als Alternativtext zu verwenden.
• Ergänzen Sie farbliche Hinweise durch Text oder andere verständliche Merkmale.
• Testen Sie Vergrößerung: Inhalte dürfen nicht unlesbar werden oder hinter anderen Elementen verschwinden.
• Berücksichtigen Sie bei Videos passende Untertitel und zugängliche Alternativen für relevante Informationen.

Bedienbar: Der Weg zum Ziel darf keine Sackgasse sein

Das zweite Prinzip betrifft die Interaktion. Viele Menschen nutzen eine Tastatur oder andere Eingabemethoden statt einer Maus. Ein Menü, das nur auf Mausbewegungen reagiert, kann für sie eine unüberwindbare Hürde sein.

Beispiel: Navigation und Warenkorb

Gehen Sie mit der Tabulatortaste durch Ihre Website. Es sollte erkennbar sein, welches Element gerade den Fokus hat. Die Reihenfolge muss nachvollziehbar bleiben, und alle wichtigen Funktionen sollten erreichbar sein. Ein sichtbarer Fokus ist dabei kein gestalterisches Extra, sondern eine Orientierungshilfe.

Öffnet sich ein Dialog, etwa eine Warenkorbansicht, muss die Bedienung weiterhin sinnvoll funktionieren. Menschen dürfen darin nicht unbeabsichtigt feststecken. Nach dem Schließen sollte die Orientierung erhalten bleiben.

Prüfen Sie besonders Navigationen, Cookie-Dialoge, Filter und individuelle Auswahlfelder. Gerade speziell gestaltete Komponenten sehen oft überzeugend aus, verhalten sich mit der Tastatur aber anders als erwartet. Ein guter Praxistest lautet: Können Sie ein Produkt auswählen und bis zur Bestellübersicht gelangen, ohne die Maus anzufassen?

Verständlich: Inhalte und Abläufe müssen nachvollziehbar sein

Das dritte Prinzip verbindet verständliche Informationen mit vorhersehbarem Verhalten. Eine technisch erreichbare Funktion hilft wenig, wenn ihre Beschriftung unklar ist oder nach einer Eingabe überraschend etwas anderes passiert.

Beispiel: Fehler im Bestellformular

Eine rot umrandete Eingabe mit dem Hinweis „Ungültig“ erklärt kaum, was zu tun ist. Besser ist eine konkrete Meldung wie „Bitte geben Sie eine E-Mail-Adresse mit @ ein“. Die Meldung sollte dem betreffenden Feld zugeordnet sein und auch mit assistiven Technologien auffindbar bleiben.

Felder benötigen verständliche Beschriftungen. Ein Platzhalter allein ist häufig ungeeignet, weil er beim Tippen verschwindet. Zusätzliche Hinweise zum erwarteten Format sollten dort stehen, wo sie bei der Eingabe gebraucht werden.

Auch konsistente Bezeichnungen erleichtern die Nutzung: Wenn dieselbe Funktion einmal „Weiter“, einmal „Übernehmen“ und einmal „Fertig“ heißt, entsteht unnötige Unsicherheit. Nicht jede sprachliche Verbesserung ist automatisch ein eigenes AA-Kriterium. Dennoch unterstützt klare Sprache eine verständliche Bedienung.

Robust: Die technische Bedeutung muss erhalten bleiben

Das vierte Prinzip betrifft das Zusammenspiel mit Browsern und assistiven Technologien, etwa Screenreadern. Diese müssen erkennen können, welche Bedeutung ein Element hat und in welchem Zustand es sich befindet.

Beispiel: Schaltflächen und Auswahlfelder

Ein optisch wie ein Button gestalteter Text ist technisch nicht unbedingt eine Schaltfläche. Fehlen die passenden Eigenschaften, wird möglicherweise weder die Funktion angekündigt noch eine Tastaturbedienung ermöglicht. Standardmäßige HTML-Elemente sind deshalb oft die verlässlichere Grundlage als vollständig selbst gebaute Bedienelemente.

Bei einem aufklappbaren Bereich muss nicht nur dessen Name verständlich sein. Auch der Zustand „ausgeklappt“ oder „eingeklappt“ sollte technisch erkennbar werden. Änderungen wie eine erfolgreiche Warenkorbaktion müssen ebenfalls so umgesetzt sein, dass sie nicht ausschließlich visuell wahrnehmbar sind.

Von den Prinzipien zu einem brauchbaren WCAG Audit

Für eine barrierefreie Website brauchen Sie mehr als eine Liste automatisch gefundener Fehler. Automatisierte Prüfungen können bestimmte Probleme erkennen, etwa fehlende technische Beschriftungen. Ob ein Alternativtext sinnvoll ist oder ein Bestellablauf verständlich funktioniert, erfordert jedoch eine inhaltliche und manuelle Bewertung.

1. Prüfumfang festlegen: Wählen Sie wichtige Seitentypen, wiederkehrende Komponenten und vollständige Nutzungsvorgänge aus.
2. Prüfmethoden kombinieren: Verbinden Sie automatisierte Tests mit Tastaturbedienung, Vergrößerung und geeigneten Screenreader-Tests.
3. Befunde nachvollziehbar dokumentieren: Halten Sie betroffene Elemente, Auswirkungen, zugehörige Kriterien und mögliche Korrekturen fest.
4. Blockaden zuerst bearbeiten: Priorisieren Sie Probleme, die wesentliche Aufgaben verhindern, ohne andere Befunde zu vergessen.
5. Korrekturen nachprüfen: Testen Sie nach Änderungen erneut und berücksichtigen Sie Barrierefreiheit bei neuen Funktionen.

Professionelle Audit-Dienste wie geta11y können diese Arbeit unterstützen. Entscheidend bleibt, dass ein Audit seinen Umfang und seine Grenzen offenlegt; es garantiert kein rechtliches Ergebnis.

WCAG 2.1 AA wird dadurch zu einem praktischen Arbeitsmaßstab statt zu einer abstrakten Abkürzung. Die wichtigste Frage lautet nicht nur, ob eine Prüfliste gut aussieht, sondern ob Menschen Ihre Inhalte verstehen und ihre Aufgaben tatsächlich erledigen können.