Barrierefreies Webdesign: WCAG 2.2 und BFSG erklärt

Was barrierefrei bedeutet

Eine Website ist barrierefrei, wenn sie sich auch dann nutzen lässt, wenn jemand nicht sieht, nicht hört, keine Maus bedienen kann oder Inhalte langsamer erfasst. Nicht „im Prinzip nutzbar", sondern tatsächlich: Ein Formular ausfüllen, einen Termin buchen, einen Preis vergleichen – vollständig und ohne fremde Hilfe.

Der Begriff wird oft auf Blindheit verengt. Tatsächlich geht es um ein breites Feld: Sehbeeinträchtigungen aller Grade, Farbfehlsichtigkeit, motorische Einschränkungen, Hörbeeinträchtigungen, Lese- und Konzentrationsschwierigkeiten. Dazu kommen Situationen, die jeden treffen – grelles Sonnenlicht auf dem Display, ein gebrochener Arm, eine laute Umgebung ohne Kopfhörer.

Kurz gesagt: Barrierefreiheit ist keine Zusatzfunktion, die man einbaut, sondern eine Eigenschaft, die eine Website hat oder eben nicht. Sie entsteht aus sauberem Aufbau – nicht aus einem Werkzeug, das man nachträglich darüberlegt.

Wer davon profitiert

In Deutschland leben rund 7,8 Millionen Menschen mit einer anerkannten Schwerbehinderung – etwa jede elfte Person. Rechnet man leichtere Einschränkungen hinzu, die im Alltag mit Websites trotzdem stören, wird die Gruppe deutlich größer. Mit steigendem Alter nehmen Seh- und Feinmotorikprobleme zu, und die Bevölkerung wird älter.

Der zweite, meist unterschätzte Effekt: Was für Menschen mit Einschränkung nötig ist, ist für alle anderen angenehm. Klare Kontraste helfen auch draußen bei Sonne. Verständliche Formularfehler helfen jedem, der es eilig hat. Eine saubere Überschriften-Struktur hilft beim Überfliegen – und Suchmaschinen beim Einordnen.

Deshalb ist Barrierefreiheit selbst dort wirtschaftlich sinnvoll, wo sie nicht vorgeschrieben ist: Sie schließt niemanden aus, senkt Rückfragen und verbessert nebenbei die Signale, auf die Google achtet.

Die WCAG 2.2 verstehen

Der internationale Maßstab sind die Web Content Accessibility Guidelines (WCAG), herausgegeben vom W3C. Aktuelle Fassung ist die Version 2.2. Sie schreibt kein Aussehen vor, sondern formuliert überprüfbare Anforderungen, die auf vier Grundprinzipien beruhen.

Die vier Prinzipien

Wahrnehmbar: Alle Inhalte müssen erfassbar sein – über Auge, Ohr oder Tastsinn. Bilder brauchen Alternativtexte, Videos Untertitel, Text ausreichenden Kontrast.
Bedienbar: Jede Funktion muss allein mit der Tastatur erreichbar sein, der Fokus muss sichtbar bleiben, und nichts darf unter Zeitdruck stehen.
Verständlich: Sprache, Aufbau und Bedienung müssen nachvollziehbar sein. Formulare erklären Fehler, statt sie nur rot einzufärben.
Robust: Der Code muss so sauber sein, dass Screenreader und andere Hilfsmittel ihn zuverlässig auswerten – auch nach dem nächsten Update.

Die drei Konformitätsstufen

Jedes Kriterium ist einer Stufe zugeordnet. A ist das Minimum und deckt grundlegende Hürden ab. AA ist der übliche Maßstab – auf diese Stufe beziehen sich Behörden, Ausschreibungen und Gesetze. AAA geht darüber hinaus und ist für die meisten Websites weder nötig noch vollständig erreichbar; das W3C selbst rät davon ab, AAA für ganze Websites zu verlangen.

Wenn von einer barrierefreien Website die Rede ist, ist praktisch immer WCAG Stufe AA gemeint.

Das BFSG: wer ist verpflichtet

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt die europäische Richtlinie European Accessibility Act in nationales Recht um. Anders als frühere Regelungen, die nur öffentliche Stellen betrafen, nimmt es auch die Privatwirtschaft in die Pflicht.

Betroffen sind vor allem

Online-Shops und andere Websites, über die Verbraucher Verträge abschließen
Websites mit Buchungs- oder Terminfunktionen
Bank-, Zahlungs- und Versicherungsdienstleistungen
Telekommunikations- und Mediendienste, Personenverkehrsdienste

Der entscheidende Punkt wird oft übersehen: Es kommt nicht auf die Branche an, sondern darauf, ob Verbraucher online ein Geschäft abschließen können. Schon eine Online-Terminbuchung kann ausreichen. Eine reine Visitenkarten- Website ohne solche Funktionen fällt in der Regel nicht darunter.

Die Ausnahme für Kleinstunternehmen

Wer weniger als 10 Mitarbeitende beschäftigt und höchstens 2 Millionen Euro Jahresumsatz beziehungsweise Jahresbilanzsumme hat, ist bei Dienstleistungen von der Pflicht ausgenommen. Wichtig: Diese Ausnahme gilt nicht für Produkte, und beide Grenzwerte müssen zusammen erfüllt sein.

Was bei Verstößen droht

Zuständig sind die Marktüberwachungsbehörden der Länder. Sie können die Beseitigung von Mängeln anordnen und im Extremfall untersagen, eine Dienstleistung weiter anzubieten. Bußgelder sind bis in den sechsstelligen Bereich möglich. Praktisch relevanter ist bislang jedoch etwas anderes: Verbraucherverbände und Mitbewerber können Verstöße aufgreifen.

Hinweis: Dieser Abschnitt ordnet ein, ersetzt aber keine Rechtsberatung. Ob und in welchem Umfang Sie betroffen sind, klärt verbindlich ein Fachanwalt. Die technische Grundlage der Prüfung ist die europäische Norm EN 301 549, die ihrerseits auf die WCAG (Stufe AA) verweist. Wer nach WCAG 2.2 AA arbeitet, ist damit auf der sicheren Seite.

Die wichtigsten Kriterien in der Praxis

Die WCAG umfasst dutzende Einzelkriterien. In der täglichen Arbeit entscheidet jedoch eine überschaubare Zahl darüber, ob eine Website funktioniert oder nicht.

Farbkontrast

Fließtext braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text (ab etwa 24 px, oder 19 px fett) mindestens 3:1. Dasselbe gilt für Bedienelemente und deren Ränder. Hellgraue Schrift auf Weiß ist der mit Abstand häufigste Verstoß – und einer der am leichtesten zu behebenden.

Bedienung per Tastatur

Alles, was mit der Maus geht, muss auch mit der Tabulatortaste gehen: Menüs, Aufklapp-Elemente, Bildergalerien, Formulare. Dabei muss der Fokus jederzeit sichtbar sein und die Reihenfolge der Sprünge der optischen Anordnung folgen. Ein häufiger Fehler sind Menüs, die sich nur bei Mausberührung öffnen, und Dialoge, aus denen man mit der Tastatur nicht mehr herausfindet.

Alternativtexte

Jedes inhaltstragende Bild braucht eine Beschreibung, die seine Funktion wiedergibt – nicht seinen Dateinamen. Rein dekorative Grafiken bekommen dagegen bewusst einen leeren Alternativtext, damit Screenreader sie überspringen. Beides falsch zu machen ist gleich schlimm: Ein „Bild1234.jpg" nervt ebenso wie ein beschriebenes Zierelement.

Formulare

Jedes Feld braucht eine sichtbare, dauerhaft verknüpfte Beschriftung – ein Platzhaltertext im Feld genügt nicht, weil er beim Tippen verschwindet. Fehlermeldungen müssen benennen, was falsch ist und wie es richtig geht, und sie dürfen sich nicht allein auf Rot verlassen.

Struktur und Überschriften

Überschriften sind Gliederung, kein Schriftgrößen-Werkzeug. Genau eine H1 je Seite, danach lückenlos absteigend. Wer mit dem Screenreader arbeitet, springt von Überschrift zu Überschrift – eine kaputte Hierarchie ist dort etwa so hilfreich wie ein Buch ohne Inhaltsverzeichnis.

Bewegung und Animation

Automatisch startende Bewegung muss sich anhalten lassen. Wer in den Systemeinstellungen „Bewegung reduzieren" gewählt hat, sollte Animationen gar nicht erst ausgeliefert bekommen – technisch über die Abfrage prefers-reduced-motion.

Barrierefreiheit prüfen

Eine verbreitete Fehlannahme ist, Barrierefreiheit ließe sich per Knopfdruck messen. Automatische Prüfwerkzeuge finden zuverlässig etwa 30 bis 40 Prozent der Probleme – nämlich die formal messbaren wie fehlende Alternativtexte oder zu schwache Kontraste. Ob ein Alternativtext sinnvoll ist, ob die Tabulator-Reihenfolge logisch wirkt oder ob eine Fehlermeldung wirklich weiterhilft, kann kein Werkzeug beurteilen.

Was automatisch geht

Für den ersten Überblick eignen sich Werkzeuge wie axe DevTools, WAVE oder die Barrierefreiheits-Prüfung in Lighthouse. Sie laufen im Browser, sind kostenlos und zeigen die eindeutigen Verstöße sofort.

Was manuell geprüft werden muss

Nur mit der Tastatur bedienen: Maus weglegen, mit Tabulator durch die ganze Seite. Kommt man überall hin? Sieht man immer, wo man ist?
Mit einem Screenreader hören: VoiceOver auf dem Mac, NVDA auf Windows – beide kostenlos. Ergibt die Seite vorgelesen noch Sinn?
Auf 200 Prozent vergrößern: Bleibt alles lesbar und bedienbar, ohne dass Inhalte abgeschnitten werden?
Ohne Farbe betrachten: Sind Zustände und Fehler auch dann erkennbar, wenn Farbe wegfällt?

Wenn Sie einen ersten Eindruck vom Stand Ihrer Website möchten, ohne selbst loszulegen: Unser kostenloser Website-Check prüft neben Tempo und Auffindbarkeit auch die Barrierefreiheit und liefert einen verständlichen Bericht.

Barrierefreiheit in WordPress

WordPress selbst ist grundsätzlich in der Lage, barrierefreie Websites auszuliefern. Ob es gelingt, entscheiden zwei Dinge: das Theme und die Art, wie Inhalte gepflegt werden.

Viele Seitenbaukästen erzeugen Markup, das optisch überzeugt und technisch quer liegt – Überschriften, die nur wegen der Schriftgröße gewählt wurden, Aufklapp- Elemente ohne Tastaturunterstützung, Textfarben knapp unter der Kontrastgrenze, Karussells ohne Anhalten-Schaltfläche. Solche Probleme lassen sich nicht mit einem Zusatzmodul beheben; sie stecken in den Vorlagen.

Worauf es in der Praxis ankommt:

Ein Theme wählen, das Barrierefreiheit ausdrücklich zusagt – und das prüfen, statt es zu glauben
Überschriften-Ebenen im Editor nach Bedeutung vergeben, nicht nach Optik
Beim Einfügen von Bildern konsequent Alternativtexte pflegen
Zusatzmodule vor dem Einsatz auf Tastaturbedienung prüfen – besonders Formulare, Kalender und Galerien
Nach größeren Updates erneut prüfen: Barrierefreiheit ist kein Zustand, sondern eine Eigenschaft, die verloren gehen kann

Bei stark verbauten Altprojekten ist Nachrüsten manchmal teurer als ein sauberer Neuaufbau. Das lässt sich seriös erst nach einer Bestandsaufnahme sagen – wer vorher eine Pauschale nennt, rät.

Warum Overlays nicht reichen

Es gibt Anbieter, die Barrierefreiheit als Zeile Code verkaufen: Ein Skript legt eine Bedienleiste über die Website, mit der sich Kontrast, Schriftgröße oder ein „Screenreader-Modus" umschalten lassen. Der Preis ist niedrig, das Versprechen groß – und das Ergebnis hält der Prüfung nicht stand.

Der Grund ist einfach: Die Probleme liegen im Aufbau der Seite. Ein Overlay kann nicht wissen, was ein Bild darstellt, welche Beschriftung zu welchem Feld gehört oder in welcher Reihenfolge Elemente sinnvoll durchlaufen werden. Es kann Symptome überdecken, nicht Ursachen beheben.

Hinzu kommt: Menschen, die täglich mit Hilfsmitteln arbeiten, lehnen Overlays überwiegend ab – sie geraten der eigenen, sorgfältig eingerichteten Software in die Quere. In mehreren Ländern wurden Websites trotz eingebautem Overlay erfolgreich verklagt. Ein Werkzeug, das Barrierefreiheit verspricht, aber die Betroffenen stört, löst kein Problem, sondern verlagert es.

Die Barrierefreiheitserklärung

Wer unter das BFSG fällt, muss öffentlich darlegen, wie es um die Barrierefreiheit des Angebots steht. Diese Erklärung gehört gut auffindbar auf die Website – üblich ist ein Platz in der Fußzeile, neben Impressum und Datenschutzerklärung.

Sie beschreibt in verständlicher Sprache:

auf welche Anforderungen geprüft wurde und mit welchem Ergebnis
welche Bereiche noch nicht barrierefrei sind, und warum
wann zuletzt geprüft wurde
wie sich Barrieren melden lassen – mit einer Adresse, die auch gelesen wird

Eine ehrliche Erklärung mit benannten Lücken ist dabei wertvoller als eine pauschale Behauptung vollständiger Barrierefreiheit. Letztere fällt auf, sobald jemand genauer hinsieht.

Häufige Fehler

Diese Punkte begegnen uns bei Bestandsaufnahmen immer wieder:

Barrierefreiheit als letzter Schritt. Nachträglich eingebaut ist sie ein Vielfaches teurer als von Anfang an mitgedacht – und bleibt oft Flickwerk.
Blindes Vertrauen in den Prüfbericht. „Keine Fehler gefunden" heißt nur, dass die automatisch prüfbaren Kriterien erfüllt sind.
Kontrast nach Gefühl. Was am eigenen, hellen Bildschirm gut aussieht, kann unter der Grenze liegen. Kontraste rechnet man aus.
Fokus-Rahmen entfernt. Der blaue Rand um das aktive Element wird gern als Schönheitsfehler weggestylt. Damit wird Tastaturbedienung unmöglich.
Alternativtexte als Pflichtübung. Stichworte oder Dateinamen erfüllen die Vorgabe formal und helfen niemandem.
Einmal prüfen und abhaken. Jeder neue Beitrag, jedes Update kann neue Barrieren einführen.

Und wenn Sie es umgesetzt haben möchten?

Dieser Leitfaden erklärt die Sache – er ersetzt keine Umsetzung. Wenn Sie wissen möchten, ob das BFSG Sie betrifft, wo Ihre Website steht und was zu tun wäre, finden Sie das auf unserer Seite zum barrierefreien Webdesign: Ablauf, Arbeitsweise und was wir konkret übernehmen.