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.

2019 lebten 7,9 Millionen Menschen mit einer anerkannten Schwerbehinderung in Deutschland.¹ 750.000 Menschen in Deutschland haben eine Konzentrationsschwäche. Rund 22 Prozent der Bevölkerung ist 65 Jahre oder älter ² und etwa 6,2 Millionen Menschen in Deutschland haben Schwierigkeiten, längere zusammenhängende Texte zu verstehen.³

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.⁴

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.

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.⁵

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.⁶
• 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 Regelwerk⁷ 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.⁸

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.

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.

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.⁹

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 G19¹⁰ 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.¹¹ Nutzen Sie diese Hilfestellung, um Ihr Team für Barrierefreiheit zu sensibilisieren.

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.