Barrierefreiheitsstärkungsgesetz

Barrierefreiheit im Web

Barrierefreiheitsstärkungsgesetz – Prüfung & Umsetzung

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das 2025 in Kraft tritt, wird digitale Barrierefreiheit auch für privatwirtschaftliche Anbieter zur Pflicht. Ziel ist es, allen Menschen – unabhängig von Einschränkungen – den Zugang zu digitalen Angeboten zu ermöglichen. Webseiten und digitale Anwendungen müssen künftig bestimmte Anforderungen an die Barrierefreiheit erfüllen. Hier zeigen wir, wie erste Tests und Optimierungen aussehen können.

Analysetools: Wichtige Tests für barrierefreie Webseiten

1. Wave-Test

Mit dem Tool WAVE lassen sich erste Barrierefreiheitsfehler identifizieren – etwa fehlende Alternativtexte, Kontrastprobleme oder leere Links.

Englische Videoanleitung - YouTube (ausführlicher)
Deutsche Videoanleitung - YouTube

Fehlerliste

Fehlendes Formular-Label

Ein Formularfeld hat kein zugehöriges Label, das erklärt, was eingetragen werden soll.

Warum ist das wichtig? Ohne Label verstehen Screenreader-Nutzer:innen nicht, wofür das Feld ist. Auch die Klickfläche wird kleiner und die Bedienung schwerer.

So beheben wir den Fehler: Verknüpfen jedes Formularfeldes mit einem sichtbaren <label> über das for-Attribut oder indem das Feld im <label> eingebettet wird. Fehlt ein sichtbares Label, nutzen wir alternativ aria-labelledby oder ein title-Attribut. Labels sind bei Buttons, versteckten Feldern oder Bildern als Buttons nicht nötig.

 

 

 

 

 

Wave Tool Screenshot

2. Google PageSpeed Insights

Auch Google PageSpeed Insights bietet Hinweise zur Barrierefreiheit. Besonders auf Kontrastverhältnisse, fehlerhafte Bildbeschreibungen und klare Navigationsstrukturen sollte geachtet werden.

Google PageSpeed Insights Screenshot

3. Tab-Test (Tastaturnavigation)

Eine oft unterschätzte Prüfung: Lässt sich die Seite ausschließlich mit der Tabulatortaste bedienen? Können Nutzer*innen in sinnvolle Bereiche springen? Werden fokussierbare Elemente sichtbar hervorgehoben und nicht verdeckt? Weitere Informationen: web.dev Accessibility: Focus

Alternativtexte – häufige Fehler & Tipps

Fehlende oder unpassende Alt-Texte sind ein häufiger Mangel. Hier ein paar Tipps, wie es besser geht (Quelle: Dennis, Erdmann & Freunde Newsletter):

  • Bildinhalt beschreiben: Was ist auf dem Bild zu sehen? Z. B. „Ein roter Apfel auf einem Holztisch“.

  • Kompakt und klar: 1–2 Sätze reichen, max. 125 Zeichen.

  • Kontext beachten: Beschreibe das Bild im Zusammenhang mit dem Seiteninhalt.

  • Keine Redundanz: Wenn das Bild durch Text erklärt wird, genügt alt="".

  • Keine Floskeln: „Bild von…“ oder „Foto von…“ weglassen.

  • Funktionale Bilder: Der Alt-Text sollte die Funktion erklären (z. B. „Zur Startseite“).

  • Dekorative Bilder: Leeres Alt-Attribut (alt=""), damit sie vom Screenreader ignoriert werden.

Ausblick: Test mit Screenreadern

Ein zentraler Punkt ist der Test mit Screenreadern, etwa NVDA oder VoiceOver. Wer seine Webseite realistisch testen möchte, sollte hören, wie sich Nutzer*innen mit Sehbeeinträchtigung durch die Seite bewegen. Ein empfehlenswertes Einführungsvideo gibt es hier: Screenreader-Test auf YouTube. Weitere Informationen folgen bald in einem gesonderten Beitrag.

Fazit:
Barrierefreiheit ist kein "nice to have", sondern bald gesetzliche Pflicht. Und mehr noch: Sie verbessert die Benutzerfreundlichkeit für alle. Wer jetzt testet, optimiert und lernt, ist 2025 auf der sicheren Seite.

Keywords:

  • Tastaturfokus
    • Tabbing the Page
    • Skiplinks
    • Offscreen Elements (Disable)

Zurück zur Newsübersicht