Seit Sommer 2025 ist Barrierefreiheit für viele Websites Pflicht. Stichwort BFSG, das Barrierefreiheitsstärkungsgesetz.
Ehrlich gesagt habe ich am Anfang gedacht: Barrierefreiheit wirklich gut umzusetzen ist super kompliziert. Nach ein paar Projekten kann ich sagen: mit dem richtigen System funktioniert es. Es ist eine klare Methode, kein endloses Klein-Klein.
In den letzten Monaten habe ich mehrere Projekte umgesetzt, bei denen Barrierefreiheit das zentrale Thema war. Auch für eine öffentliche Stelle. In diesem Beitrag erkläre ich dir meine 6-Schritte-Methode, mit der ich da rangehe.
Ein kurzer Disclaimer vorab: ich bin keine Anwältin. Was hier steht, ist Praxis-Sicht, keine Rechtsberatung.
Für wen die BFSG eigentlich gilt
Bevor ich anfange zu prüfen, kläre ich, ob die Vorgaben für die Website überhaupt gelten. Es gibt drei Fälle.
Fall 1: Öffentliche Stellen. Stadt, Kreis, Behörde, öffentliche Stiftung. Hier ist Barrierefreiheit schon seit Jahren Pflicht, und es gelten die strengsten Anforderungen.
Fall 2: B2C-Geschäft ab einer gewissen Größe. Wenn du einen Onlineshop oder eine Buchungsplattform betreibst, also Privatpersonen direkt bei dir kaufen können, bist du seit Juni 2025 in der Pflicht. Voraussetzung: du hast mehr als zehn Vollzeit-Mitarbeitende oder über zwei Millionen Euro Jahresumsatz. Kleinunternehmen unter diesen Schwellen sind aktuell ausgenommen.
Fall 3: Reines B2B oder eine Info-Website. Aktuell besteht keine Pflicht. Ich empfehle es trotzdem. Es ist ein Qualitätsanspruch, Suchmaschinen bevorzugen barrierefreie Seiten, und wer früh dran ist, hat keinen Stress, wenn die Vorgaben in den nächsten Jahren erweitert werden.
Was ich daraus ableite: bei Fall 1 und 2 ist meine Methode Pflichtprogramm. Bei Fall 3 ist sie Qualitätsprogramm.
Das Website-System entscheidet schon vorher
Eine ehrliche Beobachtung, bevor ich auf die sechs Schritte komme: welches System du nutzt, beeinflusst, wie aufwändig Barrierefreiheit später wird.
Ich arbeite mit WordPress, und besonders Greyd ist von Haus aus schon ziemlich barrierearm. Da gibt es im Nachhinein nicht mehr viel zu beheben. Andere Systeme, mit denen ich früher viel gearbeitet habe – die alte WordPress Bakery oder Elementor zum Beispiel oder bestimmte alte Themes – produzieren oft so verschachteltes HTML, dass Barrierefreiheit später ein echter Kampf wird.
Wenn du gerade neu baust oder einen Relaunch planst und Barrierefreiheit irgendwann ein Thema sein könnte: denk das System schon in der Auswahl mit. Das spart später viel Aufwand.
Schritt 1: Automatische Vorprüfung
Bevor ich manuell durch die Seite gehe, lasse ich Werkzeuge die offensichtlichen Sachen finden. Da gibt es ein paar kostenlose Tools, die ich nutze.
axe von Deque und WAVE von WebAIM sind beides Browser-Erweiterungen für Chrome, die du dir installieren und auf jeder Seite laufen lassen kannst. Lighthouse ist direkt im Chrome eingebaut, das findest du in den Developer Tools. Plus der W3C-Validator, ein externes Tool, in das ich die URL eingebe und einen Prüfbericht zurückbekomme.
Diese Werkzeuge laufen ein paar Sekunden und geben mir eine Liste mit allem, was sie automatisch erkennen können: HTML-Fehler, Struktur-Probleme, Kontrast-Sachen, fehlende Beschriftungen.
Erfahrungsgemäß finden sie die einfacher zu fixenden 30 Prozent der Barrieren. Den Rest finden sie nicht, das ist später der manuelle Teil. Was sie nicht finden, bedeutet also nicht, dass alles in Ordnung ist. Es bedeutet nur, dass es außerhalb dessen liegt, was sich automatisch prüfen lässt.
Schritt 2: Struktur prüfen
Die Struktur einer Website ist das Fundament für fast alles, was danach kommt. Wenn sie nicht stimmt, hilft das schönste Design nichts.
Eine Seite hat normalerweise eine Hauptüberschrift, mehrere Zwischenüberschriften, einen Hauptbereich, eine Navigation und einen Fußbereich. Ich prüfe, ob es genau eine Hauptüberschrift pro Seite gibt, ob die Zwischenüberschriften logisch aufeinander aufbauen, ob die Bereiche sauber abgegrenzt sind.
Wichtig: Überschriften sind nicht dazu da, eine bestimmte Schriftgröße zu erzeugen. Wenn du eine kleinere Überschrift willst, änderst du das Styling, nicht die Ebene. Sonst meckern Vorlesegeräte, weil die Hierarchie durcheinander ist.
Plus prüfe ich, ob es einen Skip-Link gibt. Also einen Link, mit dem jemand direkt zum Inhalt springen kann, ohne sich durch die gesamte Navigation tasten zu müssen. Das ist vor allem für Menschen wichtig, die mit der Tastatur navigieren.
Schritt 3: Wahrnehmung prüfen
Hier geht es um die Frage: kann jeder den Inhalt sehen und verstehen?
Ich prüfe Kontraste systematisch. Es gibt einen festen Wert, den Schriftfarbe und Hintergrundfarbe einhalten müssen, damit jemand mit schwachen Augen lesen kann. Dann zoome ich auf 200, 300 und 400 Prozent. Bricht das Layout? Verschwinden Buttons? Ich schaue mir die Seite auch in der Mobile-Ansicht auf 320 Pixel Breite an.
Außerdem prüfe ich das Verhalten bei reduzierter Bewegung. Animationen müssen abschaltbar sein, sonst wird Menschen mit bestimmten Empfindlichkeiten schlecht. Und ich gehe die Alt-Texte für Bilder durch: Inhaltsbilder brauchen eine kurze Beschreibung, dekorative Bilder bekommen den Hinweis, dass sie dekorativ sind.
Was ich oft in Projekten finde: Markenfarben in Pastelltönen, die als Schrift zu schwach sind. Das ist meiner Meinung nach das Hauptproblem bei vielen barrierefreien Websites, weil das Branding oft nicht barrierearm angelegt wurde. Wenn ein Unternehmen dann eine barrierefreie Seite möchte und die Farben das nicht hergeben, müssen wir gemeinsam eine Lösung finden. Die Marke ist kein zulässiger Grund, Kontraste zu unterschreiten.
Schritt 4: Tastatur-Bedienung
Maus weglegen. Die Seite muss komplett mit der Tastatur bedienbar sein.
Du klickst ins Browserfenster und benutzt nur noch die Tab-Taste. Damit hüpfst du von Element zu Element. Ist die Reihenfolge logisch? Ist immer sichtbar, wo du gerade bist? Funktionieren Burger-Menü, aufklappbare Bereiche, Modal-Fenster, Formulare?
Was ich oft finde: Buttons, die nur auf Maus-Klicks reagieren, aber nicht auf die Tastatur. Fokus-Markierungen, die aus dem Design entfernt wurden, sodass man nicht mehr sieht, wo man steht. Verschachtelte Klick-Bereiche, die zweimal Tab brauchen.
Diese Stelle gehört zu den Dingen, die kaum eine automatische Prüfung findet. Hier braucht es die menschliche Hand.
Schritt 5: Vorlesegeräte
Wer mit einem Vorlesegerät arbeitet, hört die Seite. Was nicht angekündigt wird, existiert für diesen Menschen nicht.
Ich nutze VoiceOver auf dem Mac. Das ist kostenlos und schon installiert. Für Windows gibt es ein entsprechendes Programm. Ich gehe damit durch mindestens drei Seiten: die Startseite, ein Formular, eine inhaltlich anspruchsvolle Unterseite.
Werden Überschriften, Listen, Bilder und Links korrekt vorgelesen? Werden Formularfelder zusammen mit ihrer Beschriftung angekündigt? Werden Fehler nach dem Abschicken hörbar gemacht?
Wer nie mit einem Vorlesegerät durch eine Seite gegangen ist, merkt nicht, wo es hakt. Diese Übung ändert die Sicht auf eigene Websites grundlegend. Ich kann jeder Webdesignerin nur empfehlen, das einmal selbst zu machen.
Schritt 6: Dokumentation
Was nicht dokumentiert ist, gilt als nicht geprüft. Vor allem bei öffentlichen Auftraggebern.
Aus den Schritten 1 bis 5 entstehen zwei Dokumente. Der interne Befundsbericht hält alles fest, was ich an Barrieren gefunden habe: was geprüft wurde, wie schwerwiegend es ist, was die Lösung war, ob es behoben ist. Bei meinem letzten Projekt waren das rund 20 Befunde. Alle dokumentiert, alle behoben.
Die öffentliche Erklärung zur Barrierefreiheit kommt in den Footer der Website. Da steht drin, inwieweit die Seite die Anforderungen erfüllt und wo noch Schwachstellen sind. Plus eine Kontaktmöglichkeit für Hinweise und ein Verweis auf die zuständige Schlichtungsstelle.
Diese Erklärung ist Pflicht, nicht nice-to-have.
Was du selbst kannst, wo ein Profi nötig ist
Du kannst klären, ob die Vorgaben für dich gelten. Du kannst die automatischen Werkzeuge laufen lassen, die habe ich dir in der Video-Beschreibung verlinkt. Du kannst mit der Tastatur durch deine Seite gehen und sehen, ob deine Markenfarben genug Kontrast bieten.
Bei der eigentlichen Umsetzung brauchst du Hilfe, sobald es technisch wird. Auch der Vorlesegerät-Test ist Übungssache. Kritisch wird es, wenn du eine öffentliche Stelle als Auftraggeberin hast – da wird geprüft.
Wenn du Hilfe brauchst
Wenn deine Website unter die BFSG fällt und du nicht weißt, wo du anfangen sollst, schreib mir gerne. Ich begleite Web-Projekte vom Bauen bis zur Erklärung.
→ Webdesign-Pakete bei Studio JUME
Mehr Details findest du im Video oben.
