
Vorteile einer barrierefreien Website
Inklusion meint mehr als rollstuhlgerechte Eingänge und mehrsprachige Inhalte. Sprache und Design, Bedienbarkeit und die Programmierung von Websites können Barrieren sein. Seit 2002 sind Bundesbehörden und öffentliche Einrichtungen dazu verpflichtet, ihre Webangebote auf Barrierefreiheit hin zu optimieren. Aber auch abseits der Vorgaben sind barrierefreie Websites sinnvoll – und das nicht nur für User mit Behinderungen. Was Barrierefreiheit meint, welche Punkte bei der Website-Erstellung zu beachten sind und warum barrierefreie Websites sogar SEO-Effekte haben, erfahren Sie hier.
Viele Menschen profitieren
Zur Relevanz barrierefreier Angebote
2019 lebten 7,9 Millionen Menschen mit einer anerkannten Schwerbehinderung in Deutschland.1 750.000 Menschen in Deutschland haben eine Konzentrationsschwäche. Rund 22 Prozent der Bevölkerung ist 65 Jahre oder älter 2 und etwa 6,2 Millionen Menschen in Deutschland haben Schwierigkeiten, längere zusammenhängende Texte zu verstehen.3
Zu diesen ohnehin großen Teilen der Bevölkerung kommen Personen mit Sehschwäche oder motorischen Einschränkungen sowie Nicht-Muttersprachler. Die Aktion Mensch definiert fünf Gründe für barrierefreie Websites:
- Vorbildfunktion.
- Reichweite erhöhen.
- Mehr Kunden erreichen.
- Kunden zufriedenstellen.
- Digitale Teilhabe fördern.
Außerdem weist Barrierefreiheit Schnittmengen zu den Best Practices von diversen Aspekten des Website-Designs auf: mobiles Webdesign und Geräteunabhängigkeit, Usability und SEO sowie Nutzbarkeit für ältere Nutzer. Laut der Aktion Mensch belegen Fallstudien, dass barrierefreie Websites bessere Suchergebnisse bringen, Wartungskosten reduzieren und das Zielpublikum vergrößern.4
Behörden der Bundesverwaltung werden durch das BGG (Gesetz zur Gleichstellung von Menschen mit Behinderungen) zur barrierefreien Gestaltung ihrer Internetauftritte verpflichtet. Die deutsche Barrierefreiheit-Informationstechnik-Verordnung (BITV) regelt die Anforderungen.
Barrierefreie Websites verbessern die UX für alle User. Viele Maßnahmen für Barrierefreiheit optimieren auch die Sprachsteuerung (HTML-Tabellen, Alt-Texte etc.), sie erleichtern die Navigation und bringen User schneller ans Ziel.

Wahrnehmbar, verständlich, bedienbar, robust
Was meint Barrierefreiheit?
Barrierefreies Webdesign bedeutet, Websites zu planen, zu programmieren und mit Content zu füllen, die alle Menschen bedienen können – also auch Menschen mit Einschränkungen. Barrieren sehen dabei unterschiedlich aus: Grafiken ohne Begleittexte, kontrastarme Farbkombinationen, unstrukturierte oder schlecht bedienbare Navigation sowie unverständliche Sprache sind nur einige davon.
Die Web Content Accessibility Guidelines (WCAG) sind weltweit der Standard für barrierefreies Internet, auf der auch die BITV basiert. Dabei bilden vier Prinzipien die Basis:
- Wahrnehmbarkeit
Menschen mit Sehbehinderungen benötigen textliche Alternativen und/oder gute Farbkontraste. - Bedienbarkeit
Websites müssen auch ohne Maus bedienbar sein. Die Navigation wird durch aussagekräftige Seitentitel und Linktexte vereinfacht. - Verständlichkeit
Die Navigation der Website ist konsistent, der Aufbau vorhersehbar und Formulare sowie Eingabefelder gut erkennbar. - Robustheit
Inhalte müssen interpretierbar sein, auch von assistiven Technologien wie Vorlesefunktion und Bedienungshilfen.5
Kleine Kniffe und große Würfe
Schritte zur barrierefreien Website
Um Barrierefreiheit im Netz zu erreichen, können schon kleine Kniffe viel bewegen. Vor allem liegt es an Content-Creatorn und Web-Entwicklern, barrierefreien Content zu produzieren. Einige dieser Punkte haben wir hier zusammengefasst.
Seheinschränkung
- Verzicht auf Schriftgrafiken.
- Kontrastreiche Farbdarstellung.
- Skalierbarkeit / verlustfreie Vergrößerung.
Blindheit
- Text-Inhalte mit entsprechenden HTML-Elementen strukturieren.
- Funktionale Bilder wie das Logo mit der Funktion auszeichnen („Startseite“ statt „Logo“); gleiches für Symbole.
- Im Diagramm dargestellte Daten, die im Fließtext aufgegriffen, aber nicht wiederholt werden, auch als HTML-Tabelle anbieten – so können auch blinde Menschen die Informationen erfassen.6
- Screenreader mitdenken:
Tabellen werden häufig pro Zeile erfasst. Redakteurinnen sollte sich also beim Erstellen einer Tabelle fragen, ob sie Sinn ergibt, wenn sie Zeile für Zeile gelesen wird. - Alt-Texte für Bilder, Grafiken und Schaltflächen:
Hat das Bild einen rein grafischen Nutzen, kann es sinnvoll sein, auf den Alt-Text zu verzichten, damit er von Screenreadern ignoriert wird und den Informationsfluss nicht stört (bspw. „roter Pfeil“). Ist das Foto inhaltlich wichtig, muss der Alt-Text aussagekräftig sein. Er muss gleichzeitig in den Fließtext passen.
Motorische Einschränkungen
- Tastaturbedienbarkeit:
Die Website muss per Tastatur genauso gut wie per Maus steuerbar sein. - Fokushervorhebung bei Tastaturbedienung.
Lernschwierigkeiten
- Klare Navigationsstruktur.
- Aufhebbare Zeitbegrenzungen.
- Formulare mit verständlicher Fehlerbehandlung.
- Informationen zusätzlich in Leichter Sprache anbieten:
Beachten Sie das offizielle Regelwerk7 für Leichte Sprache. Denn Leichte Sprache ist nicht bloß einfacher gehalten, sondern folgt speziellen Vorgaben. Prüfungen bzw. Übersetzungen können bei Bedarf extern beauftragt werden. - Abkürzungen ausschreiben, Akronyme auszeichnen.
Schwerhörigkeit/Gehörlosigkeit
- Videos mit Untertitelung.
- Informationen in Deutscher Gebärdensprache einbinden, sofern z.B. bei Live-Übertragungen Untertitel nicht möglich sind.
- Vollständige Text-Transkriptionen können einfach nachgelesen werden. Audiodeskription bei wichtigen visuellen Informationen einbinden.8
Hinweis: Captchas sind nicht barrierefrei!
Captchas (Completely Automated Public Turing test to tell Computers and Humans Apart) grenzen Menschen mit Seh- oder Lernbehinderung sowie blinde Menschen aus. ReCaptcha bietet Audiodateien nur auf Englisch an, und diese sind teilweise schwer zu verstehen.
Insgesamt gilt es, die Navigation und Strukturelemente möglichst klar zu gestalten. User sollen jederzeit einen Überblick über ihre aktuelle Position behalten und diese möglichst einfach wechseln können. Barrierefreie Websites wirken sich somit positiv auf das UX-Design aus, da sie die Nutzung vereinfachen und die Wege verkürzen.
Barrierefreie Formulare erleichtern das Ausfüllen: Klicke ich auf „Vorname“, springe ich zum Eingabefeld. Sende ich ein Formular ab, habe aber ein wichtiges Feld vergessen, springe ich direkt zum Feld.
Tipps für den Workflow
Barrierefreiheit von Beginn an mitdenken
Statt nachträglich Lösungen zu finden, sollte Barrierefreiheit im Idealfall zum integralen Bestandteil Ihres Arbeitsprozesses werden. Ob technische, grafische oder redaktionelle Aspekte: Es gilt, Barrierefreiheit bei jeder Entscheidung zu bedenken. Gerade in der Umstellungsphase sollte daher eine Person als Verantwortliche regelmäßig prüfen, ob in jedem Schritt Barrierefreiheit mitgedacht wurde.
Barrierefreiheit ist Teamleistung!
Das Thema Barrierefreiheit betrifft sämtliche Aspekte der Website-Entwicklung und -Pflege. Beziehen Sie also alle Beteiligten ein! Vom Projektmanager über Designer bis zur Entwicklung und Kunden: Barrierefreiheit ist kein Einzelsport.

Internationaler Standard für barrierefreie Websites
Web Content Accessibility Guidelines
Die Richtlinien für barrierefreie Inhalte (WCAG) sind ein internationaler Standard zur Gestaltung von barrierefreien Webinhalten. In der Europäischen Union sind die WCAG für öffentliche Stellen verbindlich: seit dem 23.09.2019 für neue, seit dem 23.09.2020 für bestehende Websites und seit dem 23.06.2021 für mobile Anwendungen. Ausgearbeitet wurden die WCAG von der Web Accessibility Initiative (WAI) des Word Wide Web Consortiums (W3C). Später wurden sie unter anderem von der ISO (Internationale Organisation für Normung) zum Standard erklärt. Eine deutsche Autorisierung der WCAG 2.0 liegt vor. Anders als WCAG 1.0 beschreibt sie allgemeiner die barrierefreie Gestaltung von beispielsweise Layout und Interaktion. Die WCAG 2.1 wurde am 5. Juni 2018 veröffentlicht. Eine deutsche Übersetzung der WCAG 2.1 liegt aktuell nicht vor, ist allerdings in Planung.9
Wo sich Barrierefreiheit umsetzen lässt
- Authoring Software: z. B. CMS.
- Evaluationstools: diverse Validatoren.
- Benutzeragenten: Webbrowser, Medienplayer, Plug-ins etc.
- Entwickler/Redakteure: Programmierung, Design, Redaktion.
- Content der Webseite: Texte, Bilder, Videos.
- User: Nutzerwissen, Erfahrung im Umgang mit Benutzeragenten und assistierender Technik.
- Assistierende Technik: Screenreader, visuelle Leseassistenten, Braillezeile, Text-to-Speech-Software, Spracherkennungssoftware, alternative Tastaturen oder Zeigegeräte etc.
Wichtig ist, auf Ressourcen von betroffenen Personen und Experten zurückzugreifen, um ein Verständnis dafür zu erlangen, was zu beachten ist. Von Außenstehenden können Punkte sonst leicht übersehen werden. Beispielsweise führen die WCAG 2.1 unter G1910 auch Vorgaben zu blitzenden Elementen auf Websites. Ziel ist es, Blitze, die Anfälle auslösen können, zu vermeiden. Unter anderem wird darauf hingewiesen, dass aufgrund der Nutzung von Vergrößerungssoftware das Blitzen von Inhalten jeglicher Größe begrenzt werden soll.11 Nutzen Sie diese Hilfestellung, um Ihr Team für Barrierefreiheit zu sensibilisieren.
Fazit
Ganzheitliche Konzepte für barrierefreie Websites
Von barrierefreien Websites profitieren Betreiber in mehrfacher Hinsicht. Der WCAG-Test prüft die Barrierefreiheit von Websites auf Basis des internationalen Standards WCAG 2.1. Die empfohlenen Maßnahmen optimieren die UX aller Nutzer und können so für mehr Traffic und Conversions sorgen – auch durch Menschen ohne Beeinträchtigung. Häufig wirkt sich der Barriereabbau auch positiv auf die Sprachsteuerung aus, seien es HTML-Tabellen oder optimierte Alt-Texte.
Außerdem liegen Barrierefreiheit und Suchmaschinenoptimierung oftmals nah beieinander: Beide Bereiche stellen ähnliche Anforderungen, sodass sich die Performance einer Website schon mit wenigen Maßnahme umfassend verbessern lässt. Hinzu kommt selbstverständlich auch ein sozialer Aspekt. Denn wer Barrieren abbaut, trägt automatisch zu einer inklusiveren Gesellschaft bei, die noch mehr Menschen offensteht.
Dabei können kleine Schritte schon viel bewegen – nicht alle davon erfordern große Zusatzinvestitionen. Wichtig ist es, alle im Team für Barrierefreiheit zu sensibilisieren und zu schulen, damit der Bereich von Beginn an mitgedacht wird. Wer ganzheitlich an das Thema Barrierefreiheit im Netz herangeht, optimiert nicht nur die Verständlichkeit der eigenen Website für alle User, sondern leistet einen wertvollen Beitrag zur digitalen Teilhabe.
3 https://www.bmbf.de/bmbf/de/bildung/weiterbildung/alphabetisierung/nationale-dekade-fuer-alphabetisierung-und-grundbildung.html
4 https://www.einfach-fuer-alle.de/artikel/einfuehrung-barrierefreiheit/ Weitere Vorteile für Unternehmen finden Sie hier: https://www.w3.org/WAI/business-case/#drive-innovation
5 https://bik-fuer-alle.de/barrierefreiheit-um-was-geht-es.html
6 siehe „Informationsgrafiken“, https://www.einfach-fuer-alle.de/artikel/bilder-grafiken-barrierefrei/
8 Leitfäden für barrierefreie Videos: https://www.w3.org/WAI/media/av/ https://bik-fuer-alle.de/leitfaden-barrierefreie-online-videos.html
9 Eine nicht autorisierte Übersetzung des Accessibility-Consultants Jan Hellbusch haben wir hier gefunden: https://www.hellbusch.de/neue-bezeichnungen/
10 G19: Sicherstellen, dass kein Bestandteil des Inhalts mehr als dreimal in einem beliebigen, eine Sekunde dauernden Zeitraum blitzt; https://www.w3.org/WAI/WCAG21/Techniques/general/G19
INTERESSE GEWECKT?
Für weitere Informationen zum Thema Vorteile einer barrierefreien Website, unserer Arbeitsweise und individuellen Angeboten, können Sie sich jederzeit gerne an uns wenden.

Weitere Beiträge

Neue Funktionen für Instagram in 2022
Instagram plant neue Funktionen für das Jahr 2022. construktiv informiert über ✓Story Likes ✓chronologische Feeds ✓persönliche Avatare.

Social Media Marketing Trends 2022
Welche Social Media Marketing Trends kommen 2022 auf uns zu? Worauf gilt es zu achten? Die Social Media Trendprognose von construktiv.

Instagram Stories: das Must-have für kreatives Social Media Marketing
Welchen Mehrwert bieten Instagram Stories? Was sind aktuelle Trends & Features? Wir zeigen die wichtigsten Funktionen. Jetzt mehr erfahren!

Influencer Marketing 2021 – What’s hot, what’s not?
Influencer Marketing 2021 – What’s hot, what’s not? Wir erklären die Dos & Don’ts des Influencer Marketings.