Damit eine Webseite für alle zugänglich ist, müssen mehrere Komponenten barrierefrei umgesetzt werden. Wie Sie Ihre Webseite und Inhalte für alle Menschen zugänglich machen, erkläre ich in diesem Artikel.
Für wen ist eine barrierefreie Webseite wichtig
Eine barrierefreie Webseite stellt sicher, dass alle Menschen diese bedienen können, unabhängig von einer Behinderung. Von 5 Menschen ist eine Person auf eine barrierefreie Webseite angewiesen – das entspricht 20 Prozent der Bevölkerung.
Die möglichen Barrieren einer Webseite sind sehr unterschiedlich, da die Behinderungen sehr unterschiedlich sind.
Blinde Menschen nutzen z.B. einen Screen-Reader, um die Webseite zu bedienen und sind deshalb unter anderem auf eine barrierefreie Code-Basis angewiesen. Menschen mit Legasthenie sind auf einen gut strukturierten und gestalteten Text angewiesen, um diesen gut lesen zu können.
Darüber hinaus profitieren auch Menschen ohne Behinderungen von barrierefreien Webseiten. Zum Beispiel können ältere Menschen mit Seh- oder Hörproblemen oder vorübergehenden Einschränkungen wie einem gebrochenen Arm von Barrierefreiheit profitieren.
Um sicherzustellen, dass eine Webseite von allen Menschen bedient werden kann, müssen alle Komponenten dieser Webseite barrierefrei sein.
Rechtliches
Auf europäischer und deutscher Ebene gibt es zudem Verordnungen und Richtlinien, die die digitale Barrierefreiheit für einige Webseiten-Betreiber verpflichtend machen.
Dazu gehören öffentliche Stellen und NGOs und ab Juni 2025 auch Online-Shops und weitere Webseiten aus dem privaten Sektor.
In Deutschland gilt für öffentliche Stellen das Behindertengleichstellungsgesetz (BGG) und für Online-Shops das BarriereFreiheitsStärkungsGesetz (BFSG). Als technische Richtlinie für Barrierefreiheit gilt in Deutschland die BITV 2.0, die sich zum größten Teil aus der internationalen WCAG ableitet und darüber hinaus noch weitere Prüfschritte enthält.
Planungs-Phase
Um diesen Regelungen zu entsprechen, ist es entscheidend, bei der Erstellung einer Webseite von Anfang an Barrierefreiheit zu berücksichtigen. Indem Barrierefreiheit bereits in die Planungsphase integriert wird, kann sichergestellt werden, dass digitale Inhalte für alle Nutzer zugänglich sind. Dies ermöglicht es, Barrieren von Anfang an zu vermeiden und spätere Nachbesserungen oder Umbauten zu minimieren, was Zeit, Geld und Ressourcen spart.
Da die Barrierefreiheit alle Komponenten einer Webseite betrifft, sollte dies auch in jeder Phase des Projekts berücksichtigt werden. Das könnte wie folgt aussehen:
- Konzeptions-Phase
- Design-Phase
- Erstellungs-Phase
- Inhalts-Phase
- Langfristige Pflege & Schulungen
Konzeptions-Phase
Der erste Schritt liegt in der Konzeption, wobei die User Experience (UX) eine zentrale Rolle spielt. An diesem Punkt werden Zielgruppe, Inhalte und Funktionen der Webseite festgelegt. Dabei zeigen sich die ersten potenziellen Barrieren und es können barrierefreie Optionen definiert werden. Ein Beispiel hierfür wäre die Integration einer Karte mit mehreren Einträgen, bei der zusätzlich eine Listenansicht zur Verfügung gestellt werden sollte.
Generell ist es ratsam, Inhalte in verschiedenen Formaten anzubieten, um eine vielfältige Nutzererfahrung zu ermöglichen. Grafiken oder Videos können beispielsweise Texte unterstützen. Es ist jedoch wichtig zu berücksichtigen, ob im Team die Ressourcen und Fähigkeiten vorhanden sind, um diese Inhalte barrierefrei zugänglich zu machen.
User Journey
Teil der Planungsphase sollte die Erstellung der User Journeys sein. Hierbei werden die verschiedenen Use Cases für Nutzer*innen definiert und die Interaktionen auf der Webseite durchgespielt.
Dabei ist es wichtig, die verschiedenen Behinderungen zu berücksichtigen. Wenn beispielsweise Support oder andere Kontaktmöglichkeiten angeboten werden, sollten mehrere Optionen zur Verfügung stehen, wie zum Beispiel E-Mail und Telefon.
Die Bereitstellung nur einer Telefonnummer schließt taube und schwerhörige Menschen von der Kommunikation aus und stellt somit eine Barriere dar.
Eine konsistente Benennung von Inhalten und Elementen auf der gesamten Webseite, wie zum Beispiel im Menü und auf den Seiten, ist ebenfalls wichtig, um eine übersichtliche Webseite zu schaffen, die sich gut bedienen lässt.
Design
Das Design spielt eine entscheidende Rolle für die Barrierefreiheit, insbesondere in Bezug auf Farbwahl, Schriftarten und Layout.
Corporate Identity / Styleguide
Beim Erstellen des Styleguides ist es wichtig, von Anfang an auf barrierefreies Design zu achten. Dies bildet den Ausgangspunkt für das gesamte Webseiten-Design, und es ist einfacher, jetzt Anpassungen vorzunehmen, wie beispielsweise die Korrektur von schwachen Farbkontrasten. Nachträgliche Änderungen sind oft aufwendiger.
Farben
Es sollten Farben gewählt werden, die miteinander kombiniert werden können und einen ausreichenden Farbkontrast sowie verschiedene Kombinations-Optionen bieten.
Um Farbkontraste zu überprüfen, empfehle ich das Tool: contrastchecker.com.
Typography
Es sollte eine Schriftart verwendet werden, die gut lesbar ist, und eine Schriftgröße von mindestens 16px.
Links & Buttons
Links sollten innerhalb von Texten immer unterstrichen sein, um sie für farbenblinde Menschen erkennbar zu machen. Buttons sollten sowohl im aktiven als auch im Hover-Zustand einen deutlichen Farbkontrast aufweisen.
Fokus
Die Berücksichtigung des Fokus ist besonders wichtig für Nutzer*innen, die Tastaturen oder andere assistive Geräte verwenden. Leider wird dieser sehr häufig entfernt oder ist nicht gut genug durchdacht. Es sollte z.B. vermieden werden, dass der Fokus die gleiche Farbe wie die Corporate Identity hat, um sicherzustellen, dass er sichtbar bleibt.
Layout
Bei der Gestaltung des Layouts ist es wichtig, eine klare Struktur zu implementieren und eine gute Lesbarkeit zu gewährleisten. Zudem sollte darauf geachtet werden, dass Inhalte und Funktionen auch in Schwarz/Weiß verständlich sind.
Code
Eine weitere wichtige Komponente einer Webseite ist die Code-Basis, auch diese muss natürlich barrierefrei sein.
Bei einer WordPress-Seite ist es vor allem wichtig, dass das verwendete Theme und der Editor barrierefrei ist. Aber auch Plugins und andere Drittkomponenten, die auf der Webseite Inhalte und Funktionen anzeigen, sollten barrierefrei sein.
Editor
Bei der Wahl des Editors für die Erstellung von Webinhalten ist die Berücksichtigung der Barrierefreiheit von entscheidender Bedeutung.
Der WordPress Block-Editor mit seinen Core-Blöcken zeichnet sich durch eine gute Barrierefreiheit im Frontend aus. Im Gegensatz zum Block-Editor sind viele Page Builder leider nicht barrierefrei.
Leider erfüllen aber nicht alle Block-Kollektionen, mit denen man den Block-Editor um weitere Blöcke erweitern kann, die Kriterien der Barrierefreiheit.
Deshalb ist es wichtig, bei den Blöcken, die keine Core-Blöcke sind und über Plugins hinzugefügt werden, auf die Barrierefreiheit zu achten.
Dies beinhaltet beispielsweise die Verwendung von barrierefreien Bezeichnungen für Icons sowie die Gewährleistung der Tastatur- und Screen-Reader-Bedienbarkeit von Elementen wie Akkordeons.
Theme
Die Auswahl an WordPress-Themes ist groß, jedoch sind leider nur wenige davon barrierefrei. Es kann herausfordernd sein, zu erkennen, welche Themes tatsächlich barrierefrei sind.
In der WordPress Directory kann man mithilfe des Schlagworts „Accessibility-Ready“ filtern, um barrierefreie Themes zu finden.
Darüber hinaus sind aber auch weitere Themes barrierefrei. Entweder welche, die in der Directory sind und nicht das Schlagwort besitzen, und Themes außerhalb der Directory.
Im Zweifelsfall ist es ratsam, diese Themes zu testen oder testen zu lassen, um sicherzustellen, dass sie den Kriterien für Barrierefreiheit entsprechen.
Die Kriterien für barrierefreie Themes in WordPress sind im WordPress Make Handbook beschrieben und können dort nachgelesen werden. Diese orientieren sich an WCAG 2.1 AA.
Plugins
Das gleiche Prinzip wie bei den Core-Blöcken gilt auch für Plugins, die Inhalte oder Funktionen im Frontend einbinden.
Das betrifft verschiedene Elemente wie Kontaktformulare, Cookie-Banner und viele weitere. Es ist wichtig sicherzustellen, dass diese Plugins ebenfalls barrierefrei gestaltet sind, um die Barrierefreiheit der Webseite zu erhalten. Wenn beispielsweise das Cookie-Banner nicht barrierefrei ist, kann dies den Zugang zur Seite für Menschen versperren, die assistive Technologien verwenden.
Individuelle Barrierefreiheits-Funktionen
Es gibt auch Plugins (und andere Drittkomponenten), die Funktionen einbinden, die für eine bessere Barrierefreiheit sorgen sollen.
Diese sogenannten Overlays binden dann unter anderem die Optionen ein, Links zu unterstreichen, bessere Farbkontraste, die Schriftgröße zu verändern oder eine besser lesbare Schrift einzustellen.
Jedoch sind solche Einstellungen oft nicht sinnvoll, da sie eigentlich von Anfang an in der Webseite vorhanden sein sollten und sie oft nicht die eigentlichen Probleme der Barrierefreiheit lösen können, wie beispielsweise eine semantisch korrekte HTML5-Struktur. Leider führen einige Overlays auch zu zusätzlichen Barrieren, etwa indem sie in die Tab-Reihenfolge eingreifen.
Mehr Informationen zu diesem Thema finden sich auf OverlayFactSheets.com. Zudem hat die IAAP (International Association of Accessibility Professionals) ein Statement gegen Overlays veröffentlicht.
Es gibt einige wenige Ausnahmen, in denen individuelle Einstellungen auf der Webseite Sinn machen können, wie zum Beispiel der „Dark Mode“ und der „Reduced Motion Mode“. Weitere Optionen wie „Low Contrast Mode“ und „High Contrast Mode“ gibt es ebenfalls, auf die ich hier jedoch nicht weiter eingehen werde.
Dies kann auf der eigenen Seite unterstützt werden. Am besten ist es, dafür einen Dark Mode zu gestalten und diesen anzuzeigen, wenn auf dem Gerät “Dark Mode” eingestellt ist. Das Umkehren von Farben, wie es die meisten Plugins tun, kann hingegen zu Problemen in der Darstellung führen und ist oft nicht barrierefrei oder nutzerfreundlich.
Es sollte zudem die Möglichkeit geben, in den „Light Mode“ zu wechseln.
Eine weitere sinnvolle Einstellung ist das Respektieren der Geräte-Einstellung für „Reduced Motion“, falls bewegte Elemente auf der Webseite vorhanden sind. Über einen Toggle-Schalter oder Ähnliches kann dann die Bewegung aktiviert werden.
Abgesehen von diesen wenigen Ausnahmen, in denen es sinnvoll sein kann, eine Webseite benutzerspezifisch anzupassen, um eine bessere Barrierefreiheit zu gewährleisten, sollten individuelle Optionen zur Barrierefreiheit vermieden und stattdessen die Webseite als Ganzes barrierefrei gestaltet und entwickelt werden.
Drittkomponenten
Bei der Verwendung von Drittkomponenten wie z.B. Newslettern und Social-Media-Kanälen sollte ebenfalls darauf geachtet werden, dass diese barrierefrei sind und die entsprechenden Optionen für Barrierefreiheit genutzt werden (zum Beispiel Alt-Texte für Bilder auf Social-Media-Kanälen).
Die externe Kommunikation erfolgt nicht nur über die Webseite, sondern auch über andere Kanäle. Wenn beispielsweise ein Instagram-Post nicht barrierefrei ist, könnten potenzielle Nutzer*innen bereits hier verloren gehen, da diese gar nicht erst auf die Webseite gelangen.
Inhalte
Der dritte große Baustein für eine barrierefreie Webseite sind die Inhalte.
Texte
Texte sollten klar strukturiert und in verständlicher Sprache verfasst werden. Komplexe Satzstrukturen und Fachbegriffe, die für die Zielgruppe möglicherweise schwer zu verstehen sind, sollten vermieden werden.
Um die Inhalte zu gliedern, sollten Zwischenüberschriften verwendet werden. Dabei ist es wichtig, die korrekte Semantik der Überschriften-Ebenen zu beachten und aussagekräftige Bezeichnungen für die Überschriften zu wählen. Dies erleichtert nicht nur das Lesen, sondern auch die Navigation für Menschen, die Screen-Reader verwenden.
Besonders wichtig sind aussagekräftige Linktexte. Nichtssagende Linktexte wie „hier klicken“ sollten vermieden und durch Text ersetzt werden, der den Inhalt des verlinkten Ziels klar beschreibt.
Durch das Bereitstellen weiterer Inhalts-Formate wie Grafiken, Videos und Audio kann die Barrierefreiheit und Verständlichkeit von Inhalten erhöht werden.
Bilder
Bilder benötigen alternative Texte, die beschreiben, was auf dem Bild zu sehen ist. In WordPress können diese entweder in der Mediathek eingegeben oder direkt beim Einbinden in eine Seite oder einen Beitrag ergänzt werden.
Auch auf Social-Media-Kanälen sollten Alt-Texte hinzugefügt werden. Ein Alt-Text kann in WordPress frei gelassen werden, wenn es sich um ein rein dekoratives Bild handelt.
Videos
Wenn Videos auf der Webseite verwendet werden, sollte sichergestellt werden, dass die Videos über Untertitel verfügen, die ein- und ausgeschaltet werden können. Diese können bei YouTube automatisch erstellt und per Hand nachkorrigiert werden.
Audio
Audioinhalte wie Podcasts sollten über eine Transkription verfügen. Dies erhöht nicht nur die Zugänglichkeit für taube und schwerhörige Menschen, sondern ist auch für hörende Menschen nützlich, da sie schneller eine bestimmte Stelle nachschlagen können.
Nachhaltige Barrierefreiheit & Schulungen
Um die Barrierefreiheit langfristig zu gewährleisten, ist es wichtig, auch nach dem Launch einer Webseite auf die Kriterien der Barrierefreiheit zu achten. Dies betrifft insbesondere das Hinzufügen neuer Inhalte und Funktionen.
Schulungen für die Redaktion können daher sinnvoll sein. Durch Schulungen kann die Redaktion lernen, wie sie barrierefreie Inhalte erstellen und pflegen kann, was langfristig zu einer zugänglichen Webseite führt.
Zusätzlich ist es wichtig, den Styleguide einzuhalten, um sicherzustellen, dass neue Inhalte und Funktionen die gleichen Standards der Barrierefreiheit wie bereits vorhandene Inhalte erfüllen.
Es kommt vor, dass bei einem Update des Themes oder eines Plugins die Barrierefreiheit beeinträchtigt wird. Dies ist nicht immer sofort offensichtlich, kann aber langfristige Auswirkungen haben. Daher ist es ratsam, regelmäßig (z.B. einmal im Jahr) die Barrierefreiheit der Webseite zu überprüfen und gegebenenfalls Anpassungen vorzunehmen, um sicherzustellen, dass die Webseite weiterhin den aktuellen Standards entspricht. Im Zuge dessen kann auch die Erklärung zur Barrierefreiheit angepasst werden.
Wie beurteilt man die Barrierefreiheit
Es gibt verschiedene Tools, die einen guten Startpunkt für die Bewertung der Barrierefreiheit einer Webseite bieten. Weder das Testen auf Barrierefreiheit noch die Umsetzung kann komplett automatisiert werden. Bei bestimmten Themen wie beispielsweise ARIA ist auch Fachwissen und Erfahrung erforderlich, um eine fundierte Bewertung vornehmen zu können.
Zum Thema Testen gibt es einen eigenen Abschnitt im Handbook des Accessibility Teams.
Ich persönlich nutze gerne das Tool “Wave”, um einen Überblick über die Barrierefreiheit einer Webseite zu erhalten. Dabei ist jedoch zu beachten, dass nicht alle Fehler automatisch erkannt werden können.
“Wave” zeigt Fehler auf der Webseite an und bietet zudem Erklärungen zu den Problematiken. Es ist hilfreich, bei der Verwendung auch Fehlergruppen auszublenden, um einen besseren Überblick zu erhalten.
Weiterführende Informationen
Um tiefer in das Thema einzusteigen, ist das Handbook des Accessibility Teams von WordPress ein guter Startpunkt.
Zudem habe ich eine Zusammenstellung von deutschsprachigen Ressourcen und Tools auf meiner Webseite.
Welche Komponenten benötigt eine barrierefreie Webseite – Fazit
Die Barrierefreiheit ist ein ganzheitlicher Prozess, der alle Komponenten einer Webseite betrifft und auch darüber hinaus als ein integraler Bestandteil eines Unternehmens und dessen Außenkommunikation betrachtet werden sollte.
Durch frühzeitige Integration von Barrierefreiheit können nicht nur Kosten und Ressourcen gespart, sondern auch unnötige Nachbesserungen vermieden werden.
Daher sollte dies von der Planungsphase über Design, der technischen Umsetzung und Inhalte gedacht und auch in der langfristigen Pflege und in Schulungen berücksichtigt werden.
Eine barrierefreie Webseite ist entscheidend, um sicherzustellen, dass digitale Inhalte für alle Menschen zugänglich sind – unabhängig von Behinderungen oder individuellen Einschränkungen. Neben rechtlichen Verpflichtungen profitieren auch Menschen ohne Behinderungen von barrierefreien Designs, die Benutzerfreundlichkeit und Zugänglichkeit fördern. Sie sind ein wichtiger Bestandteil einer inklusiven Gesellschaft.
- Komponenten einer barrierefreien Webseite - 20. März 2025
