Barrierefreiheit auf Websites ab Juni 2025 Pflicht! Barrierefreiheitsstärkungsgesetz (BFSG)
Inhaltsverzeichnis:
Ab Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft, welches für viele Webseiten die Einhaltung von Barrierefreiheitsstandards verpflichtend macht. Dieser Gesetzesakt zielt darauf ab, die digitale Zugänglichkeit für alle Nutzer – unabhängig von ihren physischen oder sensorischen Fähigkeiten – sicherzustellen. Gemäß BFSG müssen Webseiten bis zum 28. Juni 2025 die Web Content Accessibility Guidelines (WCAG) erfüllen.
Die vier Grundprinzipien der Barrierefreiheit
- Wahrnehmbarkeit: Inhalte müssen durch Maßnahmen wie Alternativtexte für Bilder für blinde Nutzer wahrnehmbar sein.
- Bedienbarkeit: Die Steuerung der Webseite muss auch ohne Maus, beispielsweise über Tastaturbefehle, möglich sein.
- Verständlichkeit: Informationen müssen einfach und klar strukturiert sein, um die Lesbarkeit zu verbessern.
- Robustheit: Inhalte müssen technologieübergreifend kompatibel und auf verschiedenen Geräten korrekt darstellbar sein.
Herausforderungen und Lösungsansätze
Viele Webseiten (ca. 2%) erfüllen noch nicht die erforderlichen Barrierefreiheitsstandards. Problembereiche umfassen oft unzureichende Kontraste und das Fehlen von Alternativtexten bei Bildern. Es empfiehlt sich, Kontraste sorgfältig zu wählen und auf helle Schrift auf dunklem Hintergrund zu setzen. Tools wie das Wave WebAim Plugin können hier unterstützen. Zudem sollte bei Bildern stets auf klare alternative Textbeschreibungen geachtet werden.
Umsetzung in der Praxis
Eine Webseite sollte ein einfaches, klares Design aufweisen und auch ohne Maus vollständig navigierbar sein. Dies betrifft alle interaktiven Elemente wie Links und Formulare, die über die Tabulatortaste erreichbar sein sollten. Ebenso sollten Formulare klar strukturiert und Medieninhalte wie Videos mit Untertiteln versehen sein.
Kontinuierliche Optimierung
Barrierefreiheit erfordert regelmäßige Überprüfungen und Anpassungen basierend auf Nutzerfeedback. Tools wie Google Lighthouse sind hilfreich, um die Barrierefreiheit kontinuierlich zu evaluieren und zu verbessern.
Formulare und Medieninhalte
Formulare sollten klar strukturiert und vollständig mit der Tastatur bedienbar sein. Nutze ARIA-Attribute im Code, um Rollen, Eigenschaften und Zustände von Elementen zu definieren. Auch bei Videos und Audios sollten Untertitel und Transkriptionen angeboten werden, um Inhalte für alle zugänglich zu machen.
Vorteile einer barrierefreien Webseite
Barrierefreiheit kommt jedem zugute, da eine zugängliche Webseite niemandem den Zugriff erschwert, sondern in vielen Fällen, wie bei schlechter Beleuchtung oder vorübergehenden Einschränkungen, sogar hilfreich sein kann. Eine Webseite, die barrierefrei gestaltet ist, bringt daher Vorteile sowohl für die Nutzerinnen und Nutzer als auch für dich selbst.
Auszug einiger Vorteile
- Gesetzeskonform arbeiten
- Markenimage wird gestärkt
- SEO wird verbessert
- Größere Reichweite durch positive Auswirkungen auf SEO.
- Deutlich bessere Bedienbarkeit bzw. Usability
- Höhere Conversionrates
Prüfschritte
- Zwei-Wege-Sprachkommunikation
- Videofähigkeiten
- Textalternative
- Zeitbasierte Medien
- Anpassbar
- Unterscheidbar
- Tastaturbedienbar
- Ausreichend Zeit
- Anfälle
- Navigierbarkeit
- Eingabemodalitäten
- Lesbar
- Vorhersehbar
- Eingabeunterstützung
- Kompatibel
- Benutzerpräferenzen
- Autorenwerkzeuge
Für welche Technologien sollte man die Webseite testen ob Sie dem Barrierefreiheitsstärkungsgesetz (BFSG) entsprechen?
Screenreader
- AWS (Windows)
- NVDA (Windows)
- VoiceOver (macOS, iOS)
- TalkBack (Android)
Bildschirmlupe
- ZoomText
- Microsoft Magnifier
- macOS Zoom
Spracherkennung
- Dragon NaturallySpeaking
- Windows Speech Recognition
- Apple Dictations
Überblick mit diesen Punkten macht man schon einiges richtig:
- Alt Tags setzen: Screenreader, jedes Bild, das Informationen zeigt oder hilft, den Inhalt deiner Seite besser zu verstehen, sollte einen Alternativtext (Alt-Tag) haben oder eine kurze Beschreibung daneben, damit Screenreader es vorlesen können.
- Farben: Lesbarkeit, der Text oder auch Buttons auf der Webseite sollte sich gut vom Hintergrund abheben. Laut den WCAG-Richtlinien braucht kleiner Text (unter 24px) einen Kontrast von mindestens 4,5:1. Wird eine größere Schrift genutzt reicht ein Kontrast von 3:1. (z.B. blasser Text vermeiden)
- Textgrößen, Texte skalierbar machen: 200% Zoom sollte möglich sein ohne, dass Elemente abgeschnitten, verdecket werden. Am besten es werden statt px Werte em-Werte oder rem-Werte genutzt
- Landmarks: Ein Orientierungspunkt auf einer Webseite ist ein signifikanter Bereich, zu dem Nutzerinnen und Nutzer gezielt navigieren möchten. Im Kontext von HTML und Web-Accessibility steht die Landmark-Rolle für eine übergeordnete Kategorie innerhalb der ARIA-Rollen (Accessible Rich Internet Applications), die diese wesentlichen Inhaltssegmente definiert und kennzeichnet. Durch die Verwendung von ARIA-Landmark-Rollen können Entwickler wichtige Bereiche der Seite klar identifizieren, wodurch die Benutzerfreundlichkeit und Zugänglichkeit der Webseite verbessert wird.
- Hierarchie der Überschriften, die altbekanten H-Tags: Überschriften sollten in der richtigen Reihenfolge stehen – also keine H3 vor einer H2 und so weiter.
- Formulare: Die einfache Bedienbarkeit von Formularen kann die Conversionrate verbessern. Jeder kennt es, man vertippt sich oder übersieht ein Pflichtfeld. Wenn die Webseite Eingaben überprüft, sollten die Fehlermeldungen klar und hilfreich sein, damit man Eingaben leicht korrigieren kann.
- Sprachauszeichnungen: Ganz einfach umsetzbar, Screenreadern helfen die Sprache zu erkennen durch das HTML das „lang”-Attribut. Die Aussprache ist somit verständlich und erfassbar.
- Seitentitel hinzufügen: Es ist wichtig, jeder Seite einen Titel zu geben, damit sich Nutzer von Screenreadern leichter orientieren können. Für WCAG-Konformität sollte der Titel sowohl den Seitennamen als auch den Namen der Webseite enthalten.
- Texte korrekt auszeichnen: Im Gutenberg-Editor wird jeder neue Absatz automatisch mit einem <p>-Tag versehen. Ein neuer Absatz beginnt mit dem Drücken der ENTER-Taste.
- Linktexte gestalten: Verwende aussagekräftige Linktexte, damit der Inhalt des Links für Nutzer mit Screenreadern klar ist. z.B. “mehr über digitale Barrierefreiheit erfahren. ” statt “mehr erfahren”.
- Listen und Aufzählungspunkte nutzen als HTML ausgezeichnet.
- Tabellen barrierefrei erstellen, Tabellen vermeiden wenn möglich. Wenn Tabellen genutzt werden, dann mit einem entsprechenden Header-Tag: <th> damit Screenreader die Inhalte korrekt interpretieren und zuordnen können und Nutzer leichter navigieren können.
- Video und Audio: Videos und Audio Inhalte sollten einen Untertitel bzw. Transkriptionen darstellen, um Inhalte für alle zugänglich zu machen.
