Was gilt es für die Barrierefreiheit von Webseiten zu beachten?

Barrierefreiheit bedeutet Nutzbarkeit ohne Einschränkungen für alle. Während uns der Abbau von Barrieren in der analogen Welt immer wieder begegnet, etwa durch den rollstuhlgerechten Umbau von Bahnhöfen oder durch den Einbau von Bodenleitsystemen für sehbehinderte Personen an Haltestellen, ist digitale Barrierefreiheit für die meisten Menschen noch Neuland. Welche Barrieren im Netz bestehen, was für deren Abbau spricht und was für die Barrierefreiheit einer Webseite beachtet werden muss, klären wir in diesem Beitrag.

Inhaltsverzeichnis:

1. Was bedeutet Barrierefreiheit im Web?

2. Welche Barrieren gibt es bei Webseiten?

3. Digitale Barrierefreiheit: Diese Gesetze und Richtlinien gibt es

4. Wer ist gesetzlich zur digitalen Barrierefreiheit verpflichtet?

5. Gute Gründe für barrierefreie Webseiten

6. Barrierefreie Texte: Was Redakteure beachten sollten

7. Barrierefreiheit im Web: Assistive Technologie

8. Beispiele für barrierefreie Web-Angebote

9. Checkliste für digitale Barrierefreiheit

10. Fazit: Wir alle profitieren von digitaler Barrierefreiheit

Unsplash: @ David Travis

Eine Webseite ist barrierefrei, wenn sie für alle NutzerInnen ohne Einschränkungen zugänglich ist. Das heißt, Einschränkungen beim Sehen, Hören, beim Verarbeiten von Informationen und auch beim Bewegen sollen sich nicht negativ auf die Benutzung eines Web-Angebots auswirken. Vom Abbau von Barrieren im Web profitieren nicht nur Personen mit Einschränkungen, sowie die steigende Zahl älterer Menschen, sondern alle NutzerInnen.

Barrierefreie Webseitenoptimierung vereint Accessibility, also die Zugänglichkeit der Inhalte für alle, und Usability, also die einwandfreie Benutzbarkeit. Um eine Webseite barrierefrei zu gestalten, sind sowohl Redakteure als auch Webdesigner gefragt. Während öffentlich-rechtliche Einrichtungen bereits gesetzlich zur Barrierefreiheit verpflichtet sind, sollen die Verpflichtungen für Privatunternehmen bis 2025 ausgeweitet werden.

Pixabay: @ Katermikesch

Wie die Barrieren in der analogen Welt sind Barrieren im Web für die meisten Menschen nicht sichtbar. Oft nehmen wir sie erst wahr, wenn wir selbst, oder Menschen in unserem direkten Umfeld durch sie eingeschränkt werden. Ähnlich den Treppenstufen, die RollstuhlfahrerInnen davon abhalten können, ein Geschäft zu befahren, können Barrieren im Netz bestimmte NutzerInnen ausschließen.

Ein barrierefreies Web hilft:

• gehörlosen oder schwerhörigen Personen
• blinden Personen, oder Menschen mit eingeschränktem Sehvermögen
• Personen mit motorischen Einschränkungen
• Menschen mit Lernschwäche oder geistigen Beeinträchtigungen
• allen anderen

Vielleicht sind Ihnen schon einige der Bemühungen bestimmter Anbieter aufgefallen, die ihre Websites für alle zugänglicher machen. Die Videoplattform YouTube etwa, erstellt für alle Videos, deren Audioqualität gut genug ist, automatisch Untertitel. So können auch gehörlose oder schwerhörige Personen die Videos nutzen. Aber nicht nur körperlich eingeschränkten Menschen ist dadurch geholfen. Auch Menschen, die eine andere Sprache sprechen, können dadurch die Inhalte nutzen. Nicht zuletzt erlauben Untertitel, Videos in der Öffentlichkeit oder an lauten Orten auch ohne Ton anzusehen.

Für Menschen mit eingeschränktem Sehvermögen, etwa einer leichten bis starken Leseschwäche oder Farbsehschwächen, kann es eine Barriere sein, wenn Texte oder Formularfelder zu klein geschrieben sind, oder sich nicht genügend vom Hintergrund abheben. Blinde Menschen sind zudem darauf angewiesen, dass Buttons, Bilder und Formulare textlich beschrieben werden. Diese textlichen Beschreibungen sollten auf einer Meta-Ebene der Webseite hinterlegt sein, damit Vorleseanwendungen darauf zugreifen können.

Auch motorische Einschränkungen, die beispielsweise die Benutzung der Maus betreffen, können eine Barriere sein. Essenziell für die Nutzbarkeit einer Webseite ist daher eine klare Struktur sowie die Möglichkeit der Navigation per Tastatur. Barrierefreiheit betrifft aber nicht nur körperliche Einschränkungen. Auch komplexe Sprache mit Fremdwörtern und Schachtelsätzen kann eine Barriere für Menschen mit Lernschwächen oder geistigen Beeinträchtigungen darstellen.

Körperliche Einschränkungen müssen nicht angeboren oder dauerhaft sein. Auch bei temporären Einschränkungen, wie einer Bindehautentzündung oder einem gebrochenen Handgelenk, kann man auf barrierefreie Inhalte angewiesen sein. Vor allem profitieren aber auch Menschen von digitaler Barrierefreiheit, die ihr Leben uneingeschränkt leben können. Haben Sie sich schon einmal einen Zeitungsartikel vorlesen lassen, während Sie den Abwasch erledigt haben?

Pixabay: @ QuinceCreative

Weil digitale Barrierefreiheit ein wichtiger Baustein für Inklusion ist, wurde sie von der EU in einer Richtlinie zur Barrierefreiheit auf Webseiten und Apps öffentlicher Stellen verankert. Die 2016 verabschiedete Richtlinie verpflichtet alle öffentlichen Stellen der Mitgliedsstaaten der EU, die Anforderungen an einen barrierefreien Zugang zu ihrem Webangebot umzusetzen. Das betrifft neben den eigentlichen Webseiten auch Downloads, Intranet und mobile Anwendungen.

Was konkret umgesetzt werden soll, sind vier Grundprinzipien, die in den sogenannten Web-Content-Accessibility-Guidelines zusammengefasst sind. Sie sollen sicherstellen, dass alle BürgerInnen der EU selbstbestimmt auf digitale Inhalte von Rathäusern, Ämtern und anderen öffentlichen Einrichtungen zugreifen können. Nach diesen Prinzipien soll das Webangebot öffentlicher Stellen wahrnehmbar, bedienbar, verständlich und robust gestaltet sein:

Inhalte sollen über verschiedene Sinneskanäle verfügbar sein. Für nicht-Text-Inhalte sollte etwa eine textliche Alternative bereitgestellt werden, Videos mit Untertiteln versehen werden etc. Außerdem sollten Textfelder über genügend Kontrast verfügen und deren Schriftgröße anpassbar sein.

Alle Funktionen der Webseite sollten auch über eine Navigation per Tastatur erreichbar sein. Die Navigation auf der Seite sollte zudem übersichtlich organisiert sein.

Dieser Punkt betrifft vor allem die Sprache auf der Webseite. Informationen sollten in leichter Sprache und übersetzbar (auch in Gebärdensprache) zur Verfügung gestellt werden. Bei der Nutzung von Online-Formularen sollten NutzerInnen unterstützt werden.

Es soll sichergestellt werden, dass die Inhalte auf der Webseite möglichst kompatibel mit aktuellen und zukünftigen Benutzeragenten, wie Screenreadern oder persönlichen (technische) Assistenten sind.

In Deutschland wurde die EU-Richtlinie 2018 in der jetzt überarbeiteten BITV 2.0, der Barrierefreien Informationstechnikverordnung, aufgenommen. Webinhalte, PDFs und Office-Dokumente, sowie nicht webbasierte mobile Applikationen müssen seit Mitte 2021 barrierefrei sein. Im Juni 2025 soll zusätzlich das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft treten, welches auch Handlungsempfehlungen und regulatorische Details für die Privatwirtschaft enthalten wird.

Unsplash: @ Tom Radetzki

Stand Januar 2024 sind alle öffentlichen Stellen des Bundes zur Barrierefreiheit im Web verpflichtet. Betroffen sind also Behörden, Krankenkassen, Hochschulen, Stiftungen, Industrie- und Handelskammern, Ärztekammern, Sozialversicherungen und Dienstleister des öffentlichen Nahverkehrs wie die Bahn. Bei den betroffenen Stellen sind alle Ebenen der Verwaltung mitgemeint, das heißt auch kommunale Verwaltungen müssen Inhalte barrierefrei gestalten.

Ausnahmen bei der Verpflichtung zur Barrierefreiheit gibt es wenige. Die Webseiten und Apps öffentlich-rechtlicher Rundfunkanstalten und von Nichtregierungsorganisationen sind von der Regelung ausgenommen, wenn sie keine Belange von Menschen mit Einschränkungen vertreten. Ansonsten gibt es unter bestimmten Voraussetzungen Ausnahmen für Archive und für Teile der digitalen Angebote von Kindergärten und Schulen.

Eine weitere Richtlinie, die 2019 verabschiedet wurde, weitet die Verpflichtung zur Barrierefreiheit auch auf Unternehmen der Privatwirtschaft aus. In Deutschland wurde sie im BFSG umgesetzt, welches 2025 in Kraft treten soll. Dann sind auch Privatunternehmen ab 10 Mitarbeitern und mit einem Mindestjahresumsatz von zwei Millionen Euro zum Abbau von Barrieren beim digitalen Angebot von Produkten und Dienstleistungen verpflichtet.

Ab 2025 sollen also zum Beispiel Bankdienstleistungen, Online-Shops und Streamingdienste barrierefrei sein. Wer aber schon jetzt auf die künftigen Anforderungen reagiert und die Forderungen der BITV umsetzt, ist seinen Konkurrenten in puncto Nutzerfreundlichkeit einiges voraus. Nicht nur können Sie digitale Teilhabe fördern, Sie können Vorbild für viele andere Unternehmen sein und dabei sogar konkret profitieren. Barrierefreiheit im Web hat nämlich auch Vorteile für SEO!

Unsplash: @ Thestandingdesk

Digitale Angebote leicht zugänglich zu gestalten, hat für alle Nutzergruppen Vorteile. Für viele Menschen ist der barrierefreie Zugang zu Webangeboten sogar unerlässlich. Werden Menschen mit Behinderung von Informations- und Kommunikationsangeboten im Netz ausgeschlossen, wird ihnen die gesellschaftliche Teilhabe erschwert. Insbesondere, da viele Informationen und Dienstleistungen nur noch online zugänglich, bzw. analog schwer zu beschaffen sind.

Dabei haben barrierefreie Webangebote nicht nur Vorteile für NutzerInnen. Auch Unternehmen profitieren vom uneingeschränkten Zugang ihrer Webinhalte. Denn indem mehr Menschen erreicht werden, gewinnt ein Unternehmen mehr potenzielle Neukunden. Die gesteigerte Nutzerfreundlichkeit wirkt sich planbar als gesteigerte Nutzung aus und obendrein wird Barrierefreiheit von Suchmaschinen belohnt, indem Webseiten mit verbesserter Navigationsstruktur und optimierter Lesbarkeit besser gefunden werden.

Unsplash: @ Sigmund

Assistive Technologie bezeichnet verschiedene Hilfsmittel, die Menschen mit Behinderung verwenden können, um eine Tätigkeit auszuführen. Der Begriff meint bewusst Hilfsmittel mit, die eingeschränkten Personen dabei helfen, das Internet zu nutzen. Wie gut das funktioniert, hängt natürlich zunächst von der Leistungsfähigkeit und Qualität des Hilfsmittels ab. Aber auch die Aufbereitung der Webinhalte für die Nutzung durch assistive Technologie ist entscheidend.

Es handelt sich prinzipiell um ein Gerät oder um eine Software, die es Menschen mit einer – vorübergehenden oder dauerhaften – sensorischen, motorischen, geistigen oder psychischen Einschränkungen erleichtert, oder erst ermöglicht, das Web zu nutzen. Ein Beispiel dafür ist die IntegraMouse, die es querschnittsgelähmten Personen möglich macht, mit dem Mund durch das Web zu steuern und ihnen so mehr Unabhängigkeit verschafft.

Verbreitetere Beispiele für assistive Technologie sind Screen- und Webreader, die Webinhalte für blinde Menschen vorlesen oder in Brailleschrift ausgeben. Für Menschen mit Einschränkungen beim Sehen gibt es spezielle Vergrößerungssysteme wie Kameralesesysteme, die bei Blendungsempfindlichkeit oder Farbwahrnehmungsstörung unterstützen. Neben kostspieligen Soft- und Hardware Technologien gibt es auch einen kostenlosen Open-Source-Screenreader, NVDA, der bestens für das Surfen im Web geeignet ist.

Einige assistive Techniken können auch über den Browser genutzt werden. Die Darstellung im Browser oder im System kann an individuelle Bedürfnisse angepasst werden. Beispiele sind:

• die Anpassung von Schriftgröße, Kontrast und Design
• die Zoomfunktion im Browser
• die Nutzung von personalisierten Userstylesheets

Userstylesheets sind dabei eher für fortgeschrittene Nutzer interessant und können Lücken in der Webstruktur, wie etwa fehlenden Fokus beim Ansteuern von Links beheben. Voraussetzung für fast alle assistiven Technologien und auch für die Nutzung von Userstylesheets ist, dass die Webinhalte auf deren Nutzung ausgelegt sind. Das heißt zum Beispiel Inhalt und Layout sollten strikt getrennt sein. Für die Barrierefreiheit von Webinhalten müssen viele Bereiche der Webentwicklung zusammenarbeiten.

Pixabay: @ David

Viele der genannten Kriterien fallen in die Verantwortung von Webdesignern und Webentwicklern. Die Kompatibilität mit assistiver Technologie etwa, und die Navigation per Tastatur müssen bei der technischen Umsetzung einer Webseite beachtet werden. Die Wahrnehmbarkeit der Inhalte muss sowohl technisch als auch gestalterisch und redaktionell umgesetzt werden. Die Verständlichkeit der Inhalte fällt hingegen komplett in die Verantwortung der Redaktion.

Redakteure sind zum Beispiel für die Struktur und Sprache der Texte verantwortlich. Die meisten Redakteure wissen, dass komplizierte Schachtelsätze beim Copywriting und im Content-Marketing nicht funktionieren. Der Inhalt wird am besten durch einfache Sprache verstanden. Von einer klaren Struktur und verständlicher Sprache profitieren letztlich alle.

Darauf müssen Redakteure achten:

In dieser Checkliste haben wir weitere Aspekte gesammelt, die Redakteure für die Barrierefreiheit ihrer Texte beachten sollten.

• Hochdeutsch in Texten zu verwenden ist wichtig, damit Vorleseprogramme den Seiteninhalt korrekt wiedergeben können. Um alle NutzerInnen zu erreichen, verzichten Sie auf Jugendsprache und Dialekt.
• einfacher Satzbau: Zu viele Nebensätze machen einen Text unnötig kompliziert. Achten Sie darauf, kurze und verständliche Sätze zu verwenden.
• Fremdwörter sollten in einem Glossar erklärt werden, wenn sie für den Kontext unverzichtbar sind.
• klare Struktur: Die Textstruktur muss über den HTML-Code vermittelt werden. Hier muss die Überschriften-Hierarchie korrekt eingehalten werden. Pro Seite darf nur eine Hauptüberschrift (h1) vorhanden sein, auf die im Verlauf der Seite Unterüberschriften (h2) folgen, die auf tieferer Ebene durch h3 gekennzeichnet werden.
• Alternativtexte werden von Screenreadern anstelle von Bildern ausgegeben. Redakteure sollten darauf achten, dass für Grafiken und Bilder aussagekräftige Alt-Tags im HTML-Code hinterlegt sind.
• Metadaten hinterlegen: aussagekräftige Meta-Titel und Meta-Description sind nicht nur für SEO wichtig. Auch für die Verwendung durch assistive Technologie sind sie essenziell.
• Schriftgröße, Abstände und Bereiche sollten Sie nicht festlegen, sondern relativ angeben. So können Sie sicher sein, dass die Inhalte trotz Vergrößerung durch die Zoomfunktion des Browsers noch gut lesbar sind.
• Abkürzungen sollten vermieden und wo nötig unbedingt bei der ersten Verwendung ausgeschrieben werden. Beispiel: Aktiengesellschaft (AG).
• Links sollten Sie im Fließtext hinterlegen. Der Linktext sollte über das Linkziel informieren. Offene Links der Form „Weitere Informationen unter: https…“ werden von Screenreadern komplett vorgelesen.

Leichte Sprache

Viele Menschen können schwere Sprache nicht verstehen. Gründe dafür können ausgeprägte Lern-Schwierigkeiten oder eine (Fremd-)Sprachbarriere sein. „Leichte Sprache“ richtet sich an eine benachteiligte Personengruppe. Bei der Übertragung eines Textes in Leichte Sprache wird dieser stark vereinfacht, auch inhaltlich. Zwar gibt es für Leichte Sprache keine Norm, die Vorgaben betreffen aber die Wort-, Satz- und Textebene.

Bei Leichter Sprache spielt aus Gründen der Verständlichkeit der Stil eine untergeordnete Rolle. Leichte Sprache ist aber nicht mit einfacher Sprache zu verwechseln. Letztere richtet sich an ein breiteres Publikum und stellt sicher, dass Ihre Texte richtig verstanden werden. Der Inhalt wird dabei vollständig in einer sprachlich besser verständlichen Form wiedergegeben. Die BITV macht für die Bereitstellung digitaler Texte in Leichter Sprache verbindliche Vorgaben. Auf der Webseite des Deutschen Bundestags können Sie sich genauer ansehen, wie Leichte Sprache umgesetzt werden kann. Klicken Sie dafür rechts oben auf den Reiter „Leichte Sprache“.

Unsplash: @ Daniel Ali

Seit 2021 sind die öffentlichen Stellen des Bundes zur digitalen Barrierefreiheit verpflichtet. Auf einigen Seiten des Bundes wurden Barrieren vorbildlich abgebaut. Besonders eindrücklich ist die Webseite des Deutschen Bundestags. Zwar gibt es auf der Webseite einen Hinweis auf die nicht ganz abgeschlossene Arbeit an der Barrierefreiheit, sie ist aber schon jetzt ein anschauliches Beispiel für ein Web-Angebot, das alle Menschen mit einschließt.

Die Webseite lässt sich (fast) komplett durch die Tastatur, also die Tabulator-Taste ansteuern. Auf einer ersten Ebene kann neben der Sprachauswahl Gebärdensprache und Leichte Sprache ausgewählt werden. Wählt man die Internetseite in Gebärdensprache, kann man die wichtigsten Plenardebatten und ausgewählte Veranstaltungen live in Gebärdensprache und mit Untertiteln verfolgen.

(Fast) alle Bilder auf der Webseite sind mit aussagekräftigen Alternativtexten versehen, die auch angezeigt werden, indem man das kleine Symbol „i“ im Bild ansteuert. Unter dem Reiter „Leichte Sprache“ sind wichtige, allgemeine Informationen zum Bundestag in Leichter Sprache und mit Bildern zu finden.

Weitere gute Beispiele sind etwa die Webseite der Agentur für Arbeit und eine Vielzahl an Internetseiten, die sich speziell an Menschen mit Einschränkungen richten. So zum Beispiel die der Aktion Mensch. Barrierefreie Webseiten aus der Privatwirtschaft konnten wir bisher nicht entdecken. Sie sind aber wegen der für 2025 angekündigten neuen Regeln zur Barrierefreiheit sicher schon in Arbeit. Was es dabei zu beachten gibt, wollen wir noch einmal übersichtlich zusammenfassen.

Bei der Umsetzung digitaler Barrierefreiheit ist für Webseitenanbieter einiges zu beachten. Als erster Schritt ist sicherlich ein Test des aktuellen Standes zum Beispiel kostenfrei durch das Open-source Tool Lighthouse im Google Chrome Browser, oder durch den BITV-Test. Am einfachsten gelingt der barrierefreie Umbau einer Webseite, wenn er von Anfang an bedacht wird, bei der Erstaufsetzung oder beim Relaunch einer Webseite. Aber auch im laufenden Betrieb lassen sich einige Verbesserungen vornehmen.

Checkliste für Barrierefreiheit:

• Sprache: alle Inhalte sollten leicht verständlich sein. Fachbegriffe und Abkürzungen sollen vermieden oder gekennzeichnet werden (zum Beispiel in einem Glossar).
• Interaktivität: sind die Inhalte für Screenreader geeignet? Dafür müssen Grafiken und Bilder durch das ALT-Attribut mit einem alternativen Text beschrieben werden.
• Untertitel und Transkription: Audiovisuelle Medien wie Videos und Audio-Inhalte sollten untertitelt und transkribiert, das heißt in Text umgewandelt, werden.
• Kontrast: ein ausreichend hoher Kontrast zwischen Hintergrund und Text ist wichtig, damit Texte besser gelesen werden können.
• Buttons und Links: Für eine barrierefreie Webseite sollten Links und Buttons ausreichend groß und mit der Tastatur bedienbar sein.
• Skalierbarkeit: Größenangaben wie die Schriftgröße sollten skalierbar dargestellt werden. Nur so können Texte über die Zoomfunktion des Browsers vergrößert werden.
• Struktur: Sind alle Überschriften korrekt zugeteilt, erleichtert das die Bedienung per Tastatur und die Sprachausgabe. Eine übersichtliche Struktur und die intuitive Navigierbarkeit ist überdies für alle NutzerInnen von Vorteil.
• Responsivität: Ist eine Webseite responsiv, kann sie, unabhängig vom verwendeten Gerät, genutzt werden. Sie ist also als Desktop-Version verfügbar und auch als mobile Version für die Nutzung per Smartphone.
• Navigation: Alle Elemente der Seite sollten über die Tabulatortaste erreichbar sein. Bei der Verwendung der Tabulatortaste sollten außerdem Sprungmarken sichtbar werden, durch die man jederzeit weiß, wo man sich auf der Seite befindet.

Der Abbau von Barrieren im Web leistet einen großen Beitrag zur Chancengleichheit. Dass alle Menschen Informationen ohne Hürden finden und nutzen können, ist das gemeinsame Ziel von Barrierefreiheit und von Webseitenanbietern. Nicht umsonst ist Barrierefreiheit ein entscheidender Faktor bei der Suchmaschinenoptimierung. Privatwirtschaftliche Unternehmen, die schon jetzt die barrierefreie Nutzung ihrer Inhalte planen und umsetzen, haben Konkurrenten viel voraus. Letztlich profitieren alle von der Barrierefreiheit von Webseiten.

Die Umsetzung der barrierefreien Webseite ist dabei nicht zu unterschätzen. Sie erfordert Teamwork auf allen Ebenen der Webentwicklung. Als erster Schritt bietet sich ein Test an, um sich einen Eindruck über den Optimierungsbedarf zu verschaffen. Für den notwendigen Abbau von Barrieren empfiehlt sich eine enge Zusammenarbeit von Webseitenanbietern, Redakteuren und Webagenturen. Als SEO-Agentur beraten wir Sie gerne zur Barrierefreiheit Ihrer Inhalte.