Lesezeit: 8 Minuten

Web-Barrierefreiheit technisch richtig umsetzen

Hands On - Das BFSG 2025

Das Barrierefreiheitsstärkungsgesetz (BFSG) bringt ab Juni 2025 neue Anforderungen an die digitale Barrierefreiheit mit sich. Für Entwickler und technische Teams bedeutet das: Sie stehen vor der Herausforderung, Websites inklusiv und barrierefrei zu gestalten. In diesem Beitrag erfahren Sie, welche technischen Aspekte besonders wichtig sind und wie Sie diese erfolgreich umsetzen. Der Schwerpunkt liegt hierbei auf der technischen Umsetzung.

Wir unterstützen Sie bei der technischen Umsetzung der Barrierefreiheit

Bedienbarkeit – Mehrere Wege zur Navigation

Die Web Content Accessibility Guidelines (WCAG) legen fest, dass Websites über mindestens zwei unabhängige Wege navigierbar sein müssen. Zu den Navigationsmethoden zählen:

• Tastaturnavigation: Alle Funktionen müssen über die Tastatur erreichbar sein.
   
• Sprachsteuerung: Nutzern sollte die Bedienung über Sprachbefehle ermöglicht werden.
   
• Gestensteuerung: Für mobile Geräte können Gesten zur Navigation verwendet werden.
   
• Suchfunktion: Eine Suchfunktion ermöglicht es Nutzern, gezielt nach Inhalten zu suchen.
   
• Breadcrumb-Navigation: Zeigt die Position innerhalb der Website und erleichtert die Orientierung.
   
• Inhaltsverzeichnis: Besonders bei langen Seiten hilft ein Inhaltsverzeichnis, gezielt Abschnitte anzusteuern.
   
• Sitemap: Ermöglicht einen Überblick über die gesamte Website.

Die wichtigste Option neben der Bedienung per Maus ist nach wie vor die Navigation über die Tastatur. Darüber hinaus bietet sich eine Suche an. Kann man keine Suche integrieren, sollte auf eine Breadcrumb-Navigation oder, nicht populär aber ausreichend, die Sitemap, zurück gegriffen werden.

Tastaturzugänglichkeit sicherstellen

Die komplette Bedienung einer Website muss auch ohne Maus möglich sein. Dies erfordert eine zweite Art der Navigation durch Tastatur- oder Sprachsteuerung. Besonders für Nutzer, die auf assistive Technologien wie Screenreader angewiesen sind, ist die Tastaturbedienung unerlässlich. Screenreader interpretieren den HTML-Code einer Website und geben den Inhalt akustisch oder in Form von Braille aus. Hierfür müssen alle interaktiven Elemente, wie Schaltflächen, Links und Formulare, über die Tastatur fokussierbar und aktivierbar sein.

Um die Bedienung über die Tastatur sicherzustellen, müssen folgende Voraussetzungen erfüllt sein:

• Logische HTML-Struktur: Elemente wie Überschriften (h1-h6) müssen in sinnvoller Reihenfolge stehen.
   
• HTML-Struktur-Elemente, wie unter anderem <nav> für die Navigation oder <header> für den Kopfbereich Element, helfen sowohl Suchmaschinen als auch assistierenden Technologien (Sreenreader), die Struktur der Seite besser zu verstehen und sollten daher verwendet werden.
   
• Verzichten Sie auf Tastaturfallen: Iframes und Elemente, welche für die Navigation irrelevant sind, sollten per tabindex -1 ausgeschlossen werden
   
• Skip-Navigation

Skip-Navigation

Um Ihre Website barrierefrei zu gestalten, sollten Nutzer wiederholende Bereiche wie Header oder Footer überspringen können. Ein Skip-Link ermöglicht es, direkt zum Hauptinhalt zu springen, ohne Menüs oder Kopfzeilen durchlaufen zu müssen. Diese Links sind meist unsichtbar und erscheinen nur bei Tastatur- oder Screenreader-Nutzung.

Ein Code-Beispiel für die Implementierung von Skip-Links:

Neben Skip-Links sorgen semantische HTML-Elemente wie <header>, <nav> und <main> sowie ARIA-Rollen für eine klare und logische Navigation. Screenreader können so wichtige Bereiche wie Überschriften oder Absätze direkt anspringen. ARIA-Rollen bieten zusätzliche Flexibilität, indem sie Elementen wie <div> spezifische Bedeutungen wie „navigation“ zuweisen. Weitere Informationen finden Sie in der ARIA-Dokumentation.

Fokus-Indikator – Sichtbare Navigation

Ein sichtbarer Fokus für interaktive Elemente wie Buttons, Links oder Formularelemente ist essenziell. Dies wird in der Regel durch eine Änderung der Umrandung oder des Hintergrunds mit einer CSS-Anpassung der outline-Eigenschaft des Elements erreicht:

Passen Sie Farben und Stile an, um den Fokus harmonisch ins Design zu integrieren. Buttons und Links sollten auch im inaktiven Zustand deutlich anzeigen, dass hier eine Interaktion möglich ist.

Bei Verwendung der Browser-eigenen Outline muss bei der Umsetzung geprüft werden, ob die Kontraststärke ausreicht. In der Regel ist dies leider nicht der Fall, so dass die Farbe per CSS angepasst werden muss.

Buttons und Links sollten auch im inaktiven Zustand deutlich anzeigen, dass hier eine Interaktion möglich ist, z.B. durch Unterstreichung und eindeutige Bezeichnungen von Verlinkungen. 

Überblendschaltflächen

Überblendschaltflächen, wie z. B. Hamburger-Menüs, stellen eine besondere Herausforderung dar. Diese Elemente müssen korrekt semantisch ausgezeichnet sein, um für Screenreader und andere Technologien zugänglich zu sein. Nutzen Sie beispielsweise das aria-haspopup-Attribut. So weiß ein Screenreader-Nutzer auch direkt, dass die neuen Inhalte per Pfeiltasten bedient werden müssen. Im Falle des Hamburger-Buttons sollte der Wert "menu" oder "true" vergeben werden.

Hierzu ein Beispiel:

Damit eine Überblendschaltfläche semantisch richtig aufbereitet wird, müssen ein paar Punkte berücksichtigt werden. Wie im vorhergehenden Code-Beispiel zu sehen, wird eine Überblendschaltfläche technisch meist als <button>-Element realisiert oder erhält die Rolle eines Buttons über ARIA.
Damit Nutzer verstehen, was die Schaltfläche bewirkt, ist eine aussagekräftige Beschriftung essenziell. Diese kann entweder direkt im <button>-Element stehen oder über das aria-label- oder aria-labelledby-Attribut hinzugefügt werden.

Zusätzlich kann ein aria-describedby-Attribut genutzt werden, um eine detaillierte Beschreibung der Schaltfläche und ihrer Funktion bereitzustellen. Diese Beschreibung kann in einem separaten Element stehen und wird dann über die ID referenziert. Dies ist besonders hilfreich, wenn die Funktion der Schaltfläche nicht sofort ersichtlich ist oder wenn zusätzliche Informationen benötigt werden, wie beispielsweise eine Anleitung zur Bedienung. Ausführlichere Informationen dazu finden Sie auch unter dem folgenden Link: https://www.barrierefreies-webdesign.de/knowhow/links-oder-buttons/menu-button.html

Um beim Thema Menüs zu bleiben: Buttons zum Schließen des Menüs oder Pop-Ups werden oft vernachlässigt, sodass sie am Ende oft nur für Maus-Nutzer erreichbar sind. Um das zu vermeiden gibt es ein paar mögliche Varianten dies umzusetzen:

1. Text ohne Icon: (close)
2. Button mit Text und nur sichtbar zugängiges Icon: (close x)
3. Versteckter Text und nur sichtbar zugängiges Icon: (x)

Hier ist ein Code-Beispiel von Manuel Matuzovic (https://codepen.io/matuzo/pen/zYvbmvm?editors=1100) zur dritten Variante:

Online-Formulare barrierefrei gestalten

Für barrierefreie Formulare ist die Semantik ganz entscheidend. Alle Steuerelemente müssen diese Eigenschaften aufweisen:

• Wenn möglich sollten nur die standardisierten HTML-Steuerelemente wie <input> oder <select> genutzt werden. Nutzt man andere Steuerelemente wie beispielsweise Drag-and-Drop-Funktionen müssen diese durch WAI-ARIA ergänzt werden.
   
• Formularelemente werden grundsätzlich mit Namen versehen. Diese Formularbeschriftungen können durch das label-Element oder auch durch title-Attribut, einige WAI-ARIA-Attribute, sowie dem legend-Element hinzugefügt werden.
  Bei der Beschriftung ist darüber hinaus zu beachten, dass der Nutzer auch ohne weiteren Kontext erkennt was er eingeben soll. Die Bezeichnungen sollen dabei in Darstellung und Funktion seitenübergreifend konsistent sein.

Ein Beispiel für ein barrierefreies Formularfeld:

Formulare und Fehlerverhütung

• Eingabefelder: Für Eingabefelder gilt, das die Pflichtfelder eindeutig gekennzeichnet werden müssen. Das erfolgt idealerweise direkt in der Beschriftung z.B. mit einem Sternchen. Hat man vorgegebene Werte, z.B. in einem Dropdown, müssen diese ebenfalls eindeutig beschriftet werden.
   
• Fehlermeldungen: Macht der Nutzer fehlerhafte Eingaben, muss das System direkt eine Rückmeldung liefern. Wenn möglich, sollten auch konkrete Korrekturvorschläge gemacht werden.
   
• Bestätigung und Rückgängigmachen: Vor dem endgültigen Absenden sollte der Nutzer die Möglichkeit haben, seine Eingaben zu überprüfen. Bei Vorgängen mit weitreichenden Konsequenzen (finanzieller oder rechtlicher Art) muss der Nutzer zudem die Möglichkeit haben, den Vorgang abzubrechen.

Barrierefreie Medien

Audiovisuelle Inhalte müssen Untertitel und Audiobeschreibungen enthalten. Wählen Sie einen Player, der folgende Eigenschaften hat:

• Vollständige Bedienbarkeit per Tastatur
   
• Lautstärkeregulierung unabhängig von Systemlautstärke
   
• Anpassbare Darstellung von Untertiteln

Live-Inhalte

Für Live-Content wie Audio und Video sind synchronisierte Untertitel essenziell. Diese können manuell erstellt oder mithilfe von ASR-Systemen (automatische Spracherkennung) generiert werden. Eine gute Audioqualität, minimale Hintergrundgeräusche und eine klare Aussprache sind entscheidend für die Genauigkeit dieser Systeme.

Wählen Sie einen Video- oder Audioplayer, der sich per Tastatur bedienen lässt, die Lautstärke unabhängig von der Systemlautstärke regelt und Funktionen wie das Pausieren oder Anpassen der Untertitel unterstützt.

Wahrnehmbarkeit von Inhalten

Zoom und Textgröße

Texte und andere Inhalte müssen auf bis zu 200 % vergrößert werden können, ohne dass Funktionen oder Inhalte verloren gehen. Verzichten Sie daher auf feste Pixelwerte und nutzen Sie relative Einheiten wie em oder rem.

Beispiel für skalierbaren Text:

Image Maps

Werden Client-seitige Image Maps genutzt, muss jedes <area> einen Alternativtext mit Angabe von Ziel oder Funktion erhalten. Dies ist wichtig, weil Nutzer von Screenreadern die Bildkarte nicht sehen können und daher den Alternativtext benötigen, um zu verstehen, was sich hinter den einzelnen Bereichen verbirgt.
Konkret könnte dies so aussehen:

Barrierefreie Downloads

Auch herunterladbare Inhalte wie PDFs oder Word-Dokumente sollten barrierefrei gestaltet sein, damit alle Nutzer problemlos darauf zugreifen können. Beachten Sie hierbei:

• Strukturierung:
  • Verwenden Sie Überschriften, um die Struktur des Dokuments klar darzustellen.
  • Setzen Sie Listen und Tabellen korrekt ein.
  • Nutzen Sie Absatzformatierungen, um den Text visuell und semantisch zu gliedern.
     
• Bilder:
  • Für Bilder und Grafiken sollten alternativer Texte bereitgestellt werden, die den Inhalt beschreiben.
     
• Tabellen:
  • Tabellen sollten eine klare Struktur haben und mit Kopfzeilen versehen sein.
  • Verwenden Sie Tabellen nicht zur Formatierung von Text.
     
• Farbkontraste:
  • Achten Sie auf ausreichende Farbkontraste zwischen Text und Hintergrund.
     
• Schriftarten:
  • Wählen Sie gut lesbare Schriftarten.
     
• PDF/UA:
  • Wenn Sie PDFs erstellen, verwenden Sie das PDF/UA-Format, das speziell für barrierefreie Dokumente entwickelt wurde.

Außerdem:

• Wählen Sie weit verbreitete und zugängliche Dateiformate (z.B. PDF, DOCX, MP3, MP4).
   
• Achten Sie auf eine angemessene Dateigröße, um schnelle Ladezeiten zu gewährleisten.
   
• Verwenden Sie aussagekräftige Dateinamen und Metadaten (Titel, Autor, Beschreibung), um die Suche und Organisation zu erleichtern.
   
• Nutzen Sie Tools zur Überprüfung der digitalen Barrierefreiheit Ihrer Dokumente (z.B. Accessibility Checker in Microsoft Word, Adobe Acrobat Pro).

CAPTCHA-Alternativen

Sensorische CAPTCHAs (visuell oder auditiv) müssen mindestens eine Alternative wie akustische CAPTCHAs oder andere Methoden wie Honey Pot Traps bieten. Ziel ist es, dass auch Nutzer mit Behinderungen diese bestehen können. Beschreiben Sie den Zweck von Nicht-Text-Inhalten klar per Text.

Sprache der Website

Damit Computer die Sprache einer Website verstehen und korrekt verarbeiten können, muss die Sprache der Website im <html> Tag per lang-Attribut (für deutsch z.B. <html lang="de">) definiert werden. Nutzt man in einzelnen Abschnitten eine andere Sprache kann dies über ein lang-Attribut in Elementen gekennzeichnet werden.

Schlusswort

Die technische Umsetzung der Web-Barrierefreiheit erfordert durchdachte Planung und detaillierte Tests. Nutzen Sie Standards wie die WCAG 2.1, um sicherzustellen, dass Ihre Website allen Nutzern zugänglich ist. Damit schaffen Sie nicht nur eine bessere Nutzererfahrung, sondern sichern auch die Einhaltung gesetzlicher Vorgaben.

Werden Sie aktiv und gestalten Sie mit uns Ihre Website barrierefrei!