Barrieren kennen und entfernen, gesetzliche Vorschriften, Themes uvm.
Nicht nur Gebäude müssen dringend barrierefrei gestaltet werden, damit jeder von uns problemlosen Zugang erhält, sondern auch Webseiten. Wir alle benutzen das Internet Tag für Tag, meistens fällt uns das „schnell mal was googlen“ gar nicht mehr auf. Dieser schnelllebige Gebrauch ist aber nicht für jeden Menschen problemlos zugänglich, vor allem für Menschen mit motorischen, geistigen oder körperlichen Einschränkungen.
Um noch mehr Menschen bei einem barrierefreien Zugang zu unterstützen, kann jeder von uns mit nur wenigen Stellschrauben seine Webseite barrierefrei und vor allem benutzerfreundlicher gestalten und so, jedem einen einwandfreien Zugang zu seinen Inhalten ermöglichen.
💡 Schon gewusst?
Was viele noch gar nicht wissen, ist, dass ab 2025 das Barrierefreiheitsstärkungsgesetz in Kraft tritt. Hierzu kannst du in Kapitel 6 mehr erfahren.
1. Was bedeutet Barrierefreiheit für Webseiten?
Die meisten von uns denken bei dem Stichwort barrierefrei sicher direkt an stufenlose Hauseingänge, ebenerdige große Duschen, Treppenlifte uvm. Das ist nicht falsch, aber barrierefrei umschließt neben den architektonischen Bereichen auch kommunikative, kulturelle und eben auch Web-Bereiche. Barrierefreiheit beschreibt heutzutage also auch das surfen im Internet.
„Inklusion funktioniert nicht ohne Barrierefreiheit. Denn wo Orte, Räume oder Kommunikationsmittel nicht barrierefrei sind, bleibt Teilhabe am kulturellen und politischen Leben, an der Arbeitswelt und in der Freizeit verwehrt.“ – Aktion Mensch
Barrierefreiheit bedeutet im Internet, dass zum Beispiel Menschen mit einer Sehbehinderung, gehörlose, schwerhörige sowie blinde Menschen vollumfänglich auf Inhalte zugreifen können und nicht durch technische Barrieren der Zugang verwehrt bleibt.
„Eine Website ist barrierefrei, wenn sich Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen nicht negativ darauf auswirken, wie wir das Web nutzen.“ – Aktion Mensch
Konkret bedeutet das, dass wir verschiedene Merkmale an Webseiten verändern und Elemente hinzufügen können, die es anderen Personen einfacher macht, mit uns und unserer Webseite zu agieren.
2. Welche Barrieren können bei Webseiten auftreten?
Barrieren auf Webseiten können ganz unterschiedlich aussehen und in verschiedenen Formen der Benutzung auftreten. Konkrete Beispiele dafür sind:
- technische Einschränkungen – Inhalte einer Webseite stehen für die Ausgabe über Assistenzen und Hilfsmittel nicht zur Verfügung. Dazu zählen fehlende Untertitel von Videos und fehlende Alternativtexte bei Bildern.
- Einschränkungen des Sehens – hierzu zählen leichte bis starke Sehschwächen bis hin zur vollständigen Blindheit, durch die Inhalte nicht (vollständig) wahrgenommen werden können. Beispiele dafür sind schlechte Kontraste und Formen oder schlechte Farb-Schemata zum Beispiel bei Rot-Grün-Schwächen.
💡 Schon gewusst?
Eine barrierefreie Webseite bringt aber auch Webseitenbetreibern einige Vorteile. Durch Inklusion erreichst du mehr Menschen aus deiner Zielgruppe und damit auch mehr potentielle Kunden. Außerdem steigt die Benutzerfreundlichkeit deiner Webseite deutlich an, was du auch in den Google Core Web Vitals Analyse herausfinden kannst. Dadurch stärkst du gleichzeitig deine Reichweite, deine Positionierung bei Google und tust den Menschen etwas Gutes. Lohnt sich doch, oder?
- Motorische Beeinträchtigungen – aufgrund körperlicher Einschränkungen können Betroffene nicht gut über eine Webseite navigieren. Hierbei können Menüs, Formulare und Buttons zum Problem werden, weswegen diese angepasst werden müssen.
Diese Punkte sind für uns meist ohne großen Mehraufwand einfach umzusetzen und sorgen für eine problemlosen Zugang zu unseren Inhalten für alle Menschen.
3. Ist WordPress überhaupt barrierefrei?
Das WordPress Team für Barrierefreiheit hat dazu verschiedene Seiten aufgebaut, auf der über neue barrierefreie Entwicklungen gesprochen wird. Die neuen Versions-Updates werden dabei auch von dem Team unterstützt, um den WordPress-Core und weiterführende WordPress Ressourcen zugänglicher zu machen.
Eines dieser wichtigen Projekte ist unter anderem das WordPress Handbuch zur Barrierefreiheit, indem du alles über die unternommenen Schritte verfolgen und nachlesen kannst.
Das Ziel der Community ist es, Webseiten nicht nur zum Lesen zugänglicher zu machen sondern WordPress auch in der Erstellung und Pflege barrierefrei zu machen:
„The Accessibility Team works to make WordPress accessible to as many people as possible. This means making sure people are not just able to read web pages but also to create and maintain websites.“
Des Weiteren gibt es eine eigene Seite zur Barrierefreiheit von WordPress in der aktuelle Tests und Updates zum Thema geteilt werden. Hier kannst du immer auf dem neuesten Stand sein, was sich gerade tut und an welchen Bereichen gerade gearbeitet wird. Ein wirklich spannender Beitrag der Community. Aktuell wird beispielsweise gerade an einer Alternative zu Slack getestet, also an einer Open-Source-Chat-Plattform, die für Menschen mit Einschränkungen benutzerfreundlicher und einfacher sein soll.
Auch wenn sich WordPress sehr für die Weiterentwicklung einsetzt ist die Open Source Software längst nicht vollständig barrierefrei. WordPress ist durchaus barrierefrei zu verwenden, aber die tatsächliche, barrierefrei Umsetzung der Webseite hängt immer vom Entwickler ab, der die Webseite baut und erstellt. Hier machen vor allem auch gute Themes und Plugins den Unterschied, ebenso wie die Weiterentwicklung des Gutenberg-Editors, der sich nun auch immer weiter in Richtung Barrierefreiheit entwickelt.
4. Wie gestalte ich meine Webseite barrierefrei?
Schriftarten und Schriftgrößen
Neben der Schriftart ist auch die angezeigte Größe deiner Schrift wichtig, denn ältere Menschen oder Menschen mit Sehschwäche, fällt das Lesen bei einer größeren Schrift leichter. Die ideale Schriftgröße liegt auf einem Bildschirm bei durchschnittliche 16 Punkten.
Wer Probleme mit der hinterlegten Schriftgröße auf einer Webseite hat, kann sich selbst ganz einfach über folgende Tastenkombinationen helfen:
- bei Windows: [STRG] [+] und [STRG] [-] oder
- bei Apple [command] [+] und [command] [-]
Mit diesen Kombinationen kannst du sowohl in den Bildschirm hereinzoomen zur Vergrößerung der Inhalte (mit +) und herauszoomen, zur Verkleinerung (mit -) der Inhalte. So kannst du die perfekte Schriftgröße, unabhängig von der Webseite, für dich einstellen.
Sprache
Deswegen ist es besser, eine einfache Sprache zu verwenden, die für jeden zugänglich ist. Mit einer leicht verständlichen Ausdrucksweise erreichst du jeden Nutzer auf deiner Webseite. Das „Netzwerk leichte Sprache“ hat dazu ein Regelwerk erstellt, an dem du dich gerne orientieren kannst. Folgende Punkte solltest du bei der Erstellung deiner Texte aber immer im Hinterkopf behalten:
- verwende kurze Sätze,
- achte auf einen einfachen Satzbau und
- auf einen weitestgehenden Verzicht von Fremdwörtern
- verwende Verben und aktive Wörter
Ein vollständiger Verzicht auf Fremdwörter ist natürlich je nach Branche und Thema nicht immer möglich. Es lohnt sich aber immer unverständliche oder nicht geläufige Begriffe nochmals zu erklären oder auch auf einen erklärenden Beitrag wie ein Lexikon zu verweisen, wenn es nicht anders möglich ist.
Struktur und Aufbau der Webseite
Überschriften
Bei Überschriften ist für eine gute Verständlichkeit unbedingt darauf zu achten, dass sie richtig ausgezeichnet sind. Dazu gibt es die Elemente <h1>, <h2>, <h3>, <h4>., welche die Hierarchie von Überschriften klassifiziert. Diese bezeichnen zum Beispiel die Hauptüberschrift mit <h1> und die folgenden, kleiner werdenden Zwischenüberschriften jeweils mit <h2>, <h3>, <h4>. Achte daher darauf, deine Überschriften in der richtigen Reihenfolge zu strukturieren und sinnvoll auszuzeichnen. Das bedeutet nach der wichtigsten Hauptüberschrift <h1> folgt die <h2> etc.
Um die Struktur einer Webseite auch für Screenreader lesbar zu machen können sog. ARIA Labels verwendet werden. ARIA steht für „Accessible Rich Internet Applications“ und ermöglicht das Hinzufügen von Navigations-Landmarken, Javascript-Widgets, Formular Hinweisen und Fehlermeldungen.
Farbe und Kontrast
Der Kontrast deiner Webseite kannst du über den Contrast Checker überprüfen.
Für deine normale Webseite empfehlen wir daher eine schwarze oder dunkel graue Schrift auf weißem Hintergrund oder weiße Schrift auf schwarzem Hintergrund.
Alt-Texte bei Bildern und Videos
Bei WordPress kannst du den Alt-Text ganz einfach in der Mediathek zu jedem Bild hinzufügen. Beachte beim Hinzufügen eines Alt-Texts, dass die Bildbeschreibung den Inhalt des Bildes präzise wiedergibt.
„Es reicht nicht nur „Bild von Katze“ zu schreiben, sondern man muss das richtig ausführen. Wir sind ja jetzt quasi blind auf der Webseite unterwegs. Deswegen schreibt man dann eher „Bild von einer grau-getigerten Katze, die auf einem Sofa liegt, wo die Sonne durchs Fenster scheint und die Katze in der Sonne liegt. Sie hat die Augen geschlossen und liegt ganz entspannt da.“ Das nimmt man ganz anders auf.“
Formulare
Das Label
Jedes Formular braucht ein geeignetes Label. Das Label dient zudem auch als Beschreibung des Formulares und hat den Vorteil, dass der Mauszeiger direkt in das dazugehörige Formularfeld überspringt. So muss das Feld nicht noch einmal separat angeklickt werden. Die Verwendung von Platzhaltern reicht bei Formularen allerdings nicht aus, denn die Labels können auch von den Screenreadern ausgelesen werden, was bei den Platzhaltern oft mit Problemen verbunden ist. Das Label sollte möglichst genau definiert werden und für den Button am Ende des Formulares sollte ein aussagekräftiger Text, wie zum Beispiel, „Jetzt bestellen“ oder „Kontaktanfrage senden“, formuliert werden.
Das Tabindex-Attribut
Das sog. Tabindex-Attribut wird dazu verwendet, die Orientierung in den Formularfeldern zu erleichtern, sodass das Feld einfach mit der Tabulator Taste ausgewählt werden kann. Insbesondere Menschen mit motorischen Schwierigkeiten können Probleme mit der Maus oder einem Touch-Pad haben, sodass die Tastatur oft das Mittel der Wahl zur Steuerung ist. Zur noch besseren Orientierung innerhalb des Formulares, kann das aktuell ausgewählte Feld farbig hervorgehoben werden.
5. Barrierefreie WordPress Themes
Zur Barrierefreiheit von WordPress Themes hat die Community eine Liste mit 92 barrierefreien und direkt einsatzbereiten WordPress Themes zusammengestellt. Während natürlich nicht für alle WordPress Themes eine Barrierefreiheit garantiert werden kann, wurden die Themes dieser Liste vom Theme-Review-Team gesondert geprüft, um sicherzustellen, dass sie den Basisanforderungen der Barrierefreiheit entsprechen.
Insbesondere die neuen Standard Themes von WordPress selbst, wie zum Beispiel das Twenty Twenty-Three oder Twenty Twenty-Two sind immer garantiert barrierefrei und kostenlos bei WordPress zum herunterladen.
Weitere beliebte barrierefreie und empfehlenswerte Themes:
Hello Elementor
Preis: kostenlos bei WordPress & kostenpflichtige Features
Ocean WP
Preis: kostenlos bei WordPress & kostenpflichtige Features
Storefront von Automattic
Preis: kostenlos bei WordPress
6. Gesetzlich vorgeschriebene Barrierefreiheit von Webseiten
Davon sind aber auch nicht alle Webseiten betroffen, sondern vermehrt Webseiten, die durch öffentliche Mittel finanziert werden. Mehr Infos zu betroffenen Webseiten des BITV.
Noch mehr Informationen zur rechtlichen Lage von barrierefreien Webseiten findest du hier.
I. Web Content Accessibility Guidelines (WCAG)
Webseiten, die diesen Richtlinien entsprechen, sind auch für Menschen mit sensorischen und motorischen Einschränkungen zugänglich, wodurch sie die angebotenen Informationen und Inhalte erfassen und nötige Eingaben tätigen können. Die WCAG ist ein wichtiger Bestandteil und das Zentrum vieler Richtlinien, die zur Förderung eines barrierefreien Internets erarbeitet wurden.
Wenn die Richtlinien der WCAG nicht vollständig und ordnungsgemäß eingehalten werden und Webseiten für Personen mit Einschränkungen nicht zugänglich sind, kann es tatsächlich zu Klagen von Einzelpersonen kommen. Diese haben in den letzten Jahren prozentual zugenommen, weswegen es wichtig ist, sich im Rahmen der Barrierefreiheit für Webseiten mit den Richtlinien zu beschäftigen.
Informationen zu den Richtlinien und welche Seiten davon betroffen sind, findest du hier.
II. Das Barrierefreiheitsstärkungsgesetz (BFSG)
Welche Produkte und Dienstleistungen fallen unter das Gesetz?
Konkret werden in der Verordnung über die Barrierefreiheitsanforderungen im Bundesgesetzblatt folgende Punkte angesprochen:
- Computer, Tablets, Smartphone
- Fernsehgeräte mit Internetzugang
- E-Book-Lesegeräter
- Geldautomaten, Fahrausweis- und Check-in-Automaten
- Router
Dienstleistungen
- E-Books
- Messenger-Dienste
- Dienstleistungen auf Mobilgeräten inklusive Apps
- Bankdienstleistungen
- elektronischer Geschäftsverkehr
- Personenbeförderungsdienste
- Telefondienste
Ein Blick in den Gesetzestext zeigt uns in §12 Absatz 2, dass Informationen zu Dienstleistungen und Produkten über assistive Technologien bereitgestellt werden müssen. Dazu zählen sensorische Kanäle, verständliche Darstellungen und sinnvolles auffinden. Des Weiteren muss insbesondere bei textlichen Inhalten folgendes beachtet werden:
[…] der Informationsinhalt wird in Textformaten zur Verfügung gestellt, die sich zum Generieren alternativer assistiver Formate durch den Verbraucher eignen, die auf unterschiedliche Art dargestellt und über mehr als einen sensorischen Kanal wahrgenommen werden können, […]
Des Weiteren heißt es in §12 Absatz 3, dass Webseiten einschließlich den zugehörigen Anwendungen und Mobilgeräten in angemessener Weise wahrnehmbar, bedienbar, verständlich und robust gestaltet werden müssen. Darüber hinaus sind diese über die Barrierefreiheit mit assistiven Technologien mit barrierefreien Kommunikationsmitteln bereitzustellen.
Sprechen wir also über Dienstleistungen im Internet oder über elektronische Kommunikationswege, ist die Webseite hier definitiv als einer der zentralen Faktoren der virtuellen Barrierefreiheit zu betrachten. Es lohnt sich also, sich bereits frühzeitig mit dem Thema der Barrierefreiheit von Webseiten zu beschäftigen.
Das Gesetz wird 2025 für Webseiten wirksam und sind gespannt, ob es möglicherweise wieder zu einer Welle von Abmahnungen kommen kann, wenn Webseiten nicht barrierefrei zugänglich angepasst werden.
7. Fazit
Umso wichtiger finden wir die eigene Umsetzung unserer Webseiten und damit mögliche Barrieren bestmöglich aus dem Weg zu räumen. Das muss nicht alles sofort passieren, aber stetig, denn in nur 2 Jahren steht bereits das Gesetz vor der Tür, nachdem unsere Webseiten barrierefrei sein müssen.
Also, worauf wartest du noch? 🙂
