BFSG und Barrierefreiheit: Website prüfen und nachbessern

Barrierefreiheit ist 2026 kein Nischenthema mehr. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) und dem European Accessibility Act rücken die WCAG-Anforderungen für viele consumerorientierte digitale Angebote in den Pflichtbereich. Gleichzeitig profitieren alle Nutzer von klaren Kontrasten, bedienbaren Formularen und verständlichen Inhalten.

Dieser Artikel ist keine Rechtsberatung. Er erklärt, was technisch und inhaltlich zu prüfen ist und wo automatisierte Checks enden.

Was das BFSG verlangt

Das BFSG setzt den European Accessibility Act in deutsches Recht um. Es richtet sich an bestimmte Produkte und Dienstleistungen, die Verbrauchern angeboten werden, darunter viele digitale Services. Die genaue Betroffenheit hängt von Angebot, Größe und Umsatz ab. Für viele Websites ist die zentrale Frage deshalb nicht „ob“, sondern „wie schnell“.

Als technischer Maßstab gelten die Web Content Accessibility Guidelines, aktuell WCAG 2.2 auf den Stufen A und AA. Die vier Prinzipien:

1. Wahrnehmbar: Inhalte müssen auch ohne Sehen oder Hören erfassbar sein.
2. Bedienbar: Alle Funktionen müssen per Tastatur und assistiver Technik nutzbar sein.
3. Verständlich: Sprache, Navigation und Fehlermeldungen müssen klar sein.
4. Robust:Markup und Komponenten müssen mit Browser und Screenreader funktionieren.

Was automatisierte Checks leisten

Automatisierte Tests erkennen eine Reihe technischer Standardfehler zuverlässig:

• fehlende Alternativtexte
• zu schwache Farbkontraste
• fehlende Formular-Labels
• Überschriften ohne logische Reihenfolge
• fehlerhafte ARIA-Attribute
• zu kleine Touch-Ziele
• positive tabindex-Werte

Der VitoScore Barrierefreiheits-Check prüft diese Signale im Rahmen der Website-Analyse. Die Ergebnisse stehen im Design-und-UX-Teil des Reports.

Was automatisierte Checks nicht leisten:

• Sie erkennen nicht, ob eine Formularstrecke logisch aufgebaut ist.
• Sie erkennen nicht, ob eine Animation motion-sensitive Nutzer überfordert.
• Sie erkennen nicht, ob ein Screenreader die Reihenfolge sinnvoll vorliest.
• Sie erkennen nicht, ob Inhalte in einfacher Sprache verständlich sind.

Automatisierte Tests sind ein Filter, kein Zertifikat.

Typische Barrieren auf Websites

1. Kontrast: Grauer Text auf weißem Grund sieht modern aus, ist aber oft unter 4,5:1.
2. Formulare: Platzhaltertext ersetzt kein Label. Screenreader brauchen ein verknüpftes <label>.
3. Bilder: Dekorative Bilder brauchen alt="", inhaltliche Bilder eine Beschreibung.
4. Navigation: Untermenüs, die nur per Hover funktionieren, sind per Tastatur nicht erreichbar.
5. Fehlermeldungen: Ein roter Rahmen ohne Text ist für farbenblinde Nutzer nicht verständlich.
6. Video: Untertitel und Transkript fehlen.
7. Sprache: Das lang-Attribut fehlt oder ist falsch, Screenreader sprechen den Text falsch aus.

Ein pragmatischer Prüfprozess

1. Automatisiert messen

Starte mit einem automatisierten Check, um die offensichtlichen technischen Lücken zu finden. Das ist der schnellste Weg zu einer Prioritätenliste.

2. Mit Tastatur bedienen

Lege die Maus weg und navigiere nur mit Tab, Shift+Tab, Enter und Escape. Kommst du durch die wichtigsten Strecken? Ist der Fokus sichtbar? Bleibt er nicht in einem Menü hängen?

3. Screenreader testen

Teste mit NVDA (Windows), VoiceOver (macOS) oder TalkBack (Android). Höre, ob Überschriften, Links und Formulare sinnvoll vorgelesen werden. Das ist keine Hexerei, aber Übung.

4. Zoom und kleine Viewports

Zoom auf 200 Prozent, teste 320 Pixel Breite. Bleibt der Inhalt lesbar? Überlappen Elemente? Verschwinden Funktionen?

5. Inhalte prüfen

Sind Überschriften aussagekräftig? Gibt es Alternativen zu „hier klicken“? Sind Fehlermeldungen konkret? Ist die Sprache verständlich?

6. Manuelles Audit

Für eine belastbare Bewertung brauchst du ein manuelles Audit gegen WCAG 2.2 AA. Das kann intern passieren, wenn das Team die Kriterien kennt, oder extern durch eine spezialisierte Prüfstelle.

Was du sofort tun kannst

• Kontraste mit einem Contrast Checker prüfen.
• Jedes Formularfeld mit einem sichtbaren Label versehen.
• Bilder mit alt-Texten ausstatten, dekorative Bilder mit alt="".
• Fokus-Styles nicht entfernen, sondern sichtbar gestalten.
• Touch-Ziele mindestens 44×44 Pixel groß machen.
• Videos mit Untertiteln und Transkripten versehen.
• Eine Barrierefreiheits-Erklärung veröffentlichen, wenn sie für dich verpflichtend ist.

Checkliste

• [ ] Automatisierter Check durchgeführt
• [ ] Tastatur-Navigation getestet
• [ ] Screenreader-Test auf einer Kernstrecke
• [ ] Zoom 200 % und 320 px Breite geprüft
• [ ] Kontraste und Formular-Labels geprüft
• [ ] Bilder und Videos mit Alternativen versehen
• [ ] Fehlermeldungen und Fokusführung geprüft
• [ ] Manuelles WCAG-2.2-AA-Audit geplant
• [ ] Barrierefreiheits-Erklärung geprüft

Fazit

Barrierefreiheit ist ein Prozess, kein einmaliger Patch. Automatisierte Checks beseitigen die technischen Standardfehler und schaffen eine belastbare Basis. Für die rechtliche und nutzerorientierte Bewertung braucht es zusätzlich manuelle Tests mit Tastatur und Screenreader. Wer beides verbindet, macht die Website für mehr Menschen nutzbar und reduziert gleichzeitig rechtliche Risiken.

Quellen

• Barrierefreiheitsstärkungsgesetz (BFSG)
• WCAG 2.2
• European Accessibility Act