Eine blinde Frau benutzt einen Computer mit Braillezeile und Computertastatur. Inklusive Gerät.

Warum jede(r) Nutzer:in von barrierearmen Internetauftritten profitiert

Du hast es bestimmt schon erlebt: die Qual einer langsamen Webseite, schlecht lesbare Inhalte, oder den Frust, durch eine nicht mobil-optimierte Seite zu navigieren. Während diese Probleme für dich nur kleine Unannehmlichkeiten sind, können sie für Menschen mit Behinderungen unüberwindbare Barrieren darstellen.

Portraitbild des Autors Richard Repenning

Barrierefreiheit oder auch Barrierearmut bedeutet, Webseiten und mobile (Web-)Anwendungen so zu gestalten und zu programmieren, dass möglichst alle Menschen diese uneingeschränkt nutzen können. Dabei bezieht sich Barrierefreiheit zunächst und vor allem auf Menschen mit Behinderungen, aber auch auf die immer älter werdende Generation von Menschen. Die Integration von Barrierefreiheit kann auf diejenigen, die sich gerade erst damit vertraut machen, einschüchternd wirken. Dennoch ist es ein wesentliches Element der Benutzererfahrung. Barrierefreiheit sollte von Anfang an in den Prozess der Entwicklung von digitalen Angeboten, wie Internetauftritten, integriert werden, anstatt sie nachträglich einzubauen.

Wir geben dir in diesem Beitrag einen kurzen Überblick über das Thema und zeigen dir, wie du es angehen kannst.

Warum ist Barrierearmut wichtig?

8 Millionen

Menschen leben in Deutschland mit einer Behinderung (1 Milliarde weltweit), von denen ca. 80% das Internet regelmäßig nutzen. Besonders bei blinden und sehbehinderten sowie bewegungseingeschränkten und chronisch kranken Menschen ist das Internet beliebt.

Eine von der Aktion Mensch in Auftrag gegebene Studie hat festgestellt, dass Menschen mit Behinderungen das Internet häufiger nutzen (6,5 Tage/Woche) als Menschen ohne eine Behinderung (5,1 Tage/Woche).

Wer macht eigentlich die Standards für barrierearme Internetauftritte?

Die Web Content Accessibility Guidelines (WCAG) wurden von dem World Wide Web Consortium (W3C) ins Leben gerufen. Dabei wurde das Ziel verfolgt, einen einheitlichen und weltweit gültigen Standard zu entwickeln, der Webinhalte barrierefrei zugänglich macht.

Generell sind die Richtlinien in drei Konformitätsstufen eingeteilt. Dabei steigen mit jeder Stufe die Anforderungen und eine Stufe ist erst erreicht, wenn alle Kriterien der vorherigen sowie der jeweiligen Stufe erfüllt sind.

Level A

Deckt die grundlegendsten Anforderungen ab. Ist das Mindestmaß an Zugänglichkeit, das erfüllt sein muss. Die Nichteinhaltung führt zu einer unzugänglichen Webseite.

Level AA

Hier werden einige der häufigsten Barrieren für Menschen mit Behinderungen beseitigt. Dies ist die höchste Konformitätsstufe, die von den meisten Webseiten verlangt wird, da sie sicherstellt, dass die größten Zugangsbarrieren beseitigt werden.

Level AAA

Dies ist die höchste Stufe der Zugänglichkeit nach den WCAG und ist für die meisten Webseiten schwieriger zu erreichen. Das Erreichen dieser Stufe ist wünschenswert, aber nicht zwingend erforderlich.

Wichtig! Die in den WCAG formulierten Techniken sind beispielhaft und dienen lediglich als Orientierungshilfe und müssen nicht zwingend angewendet werden. Deine Webseite kann also WCAG-konform sein, ohne dabei eine einzige Technik einzusetzen. Dieses abstrakt wirkende System hat den Hintergrund, dass Webtechnologien, wie z.B. HTML5 in ihrer Entwicklung nicht gestört werden.

Spezifische Regularien in Deutschland

Gesetze und Standards, wie bspw. die EU-Richtlinie 2016/2102, sind in Deutschland vor allem durch öffentliche Einrichtungen und Verwaltungen umzusetzen. Neben den oben genannten WCAG-Regeln sind deshalb die folgende Regularien relevant:

Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)

Die BITV 2.0 legt fest, welche Anforderungen für barrierefreie Internetauftritte in Deutschland gelten.

Mehr erfahren

Landesgesetze zu barrierefreier Informationstechnik

Für kommunale Internetauftritte berücksichtigen wir länderspezifische Verordnungen und Gesetze.

Mehr erfahren

Klingt alles ziemlich umfangreich

Ist es auch!

Dennoch reicht es oftmals, sich dieses Thema einfach bewusst zu machen. Nicht jeder Mensch ist mit Maus und Tastatur im Internet unterwegs, sondern benutzt assistive Technologien, wie Screenreader. Geräteunabhängigkeit ist daher ein wichtiges Erfolgskriterium.

Denkst du während deines Designprozesses auch an blinde Menschen, dann können alle Links und Bedienelemente mit der Tastatur erreicht werden. Dies betrifft auch alle Bedienelemente in Videos (Play, Pause, Lautstärke). Hast du an Gehörlose gedacht, so stellst du in deinen Videos einen Untertitel zur Verfügung.

Gestalte deine Inhalte POUR

Mit der POUR-Formel kannst du bereits einige sehr wichtige Faktoren der Barrierefreiheit im Internet abdecken.

Sorge dafür, dass deine Inhalte über mehrere Sinne wahrnehmbar sind sodass Menschen, die einen Sinn verloren haben, die Inhalte über einen anderen wahrnehmen können.

  • Alt-Tags: Aussagekräftige alternative Texte (alt-Tags) für Bilder machen diese für blinde Menschen „sichtbar“.

  • Adaptive Textgröße: Durch eine automatisch skalierende Textgröße wird die Lesbarkeit des Inhalts verbessert.

  • Displayorientierung: Deine Webseite ist im Porträt und Querformat nutzbar. Dadurch können Nutzer mit Sehbehinderungen ihr Gerät drehen, um den Text zu vergrößern.

  • Formulare: Formularfelder sollten dem Browser mitteilen, welche Daten gefordert sind, dadurch kann es automatisch ausgefüllt werden oder den Nutzer informieren welche Daten gefordert sind.

  • Interface Komponenten: Buttons und Icons sollten immer ein Label mit der Information ihres Zwecks besitzen.

  • Textabstand: Nutzern sollte es möglich sein, den Abstand zwischen den Zeilen, Absätzen und Worten zu vergrößern, ohne an Funktionalität zu verlieren.

  • Farbkontraste: Sorge mindestens für einen Farbkontrast von 4,5:1 (7:1 optimal). Inhalte werden dadurch besser wahrnehmbar. Nutze den Kontrast-Checker von WebAIM um deine Farbkombinationen zu testen.

Inhalte sollten sowohl mit Maus als auch Tastatur bedienbar sein. Viele Menschen können Computermäuse nur eingeschränkt oder gar nicht benutzen. Sind deine Inhalte nicht mit der Tastatur bedienbar, können blinde Menschen die Seite meistens gar nicht benutzen.

  • Bedienbarkeit: Alle Inhalte sollten über die Tastatur erreichbar sein. Die Nutzer navigieren Inhalte hauptsächlich mit der Tabulatortaste in Verbindung mit einer Lesesoftware.

  • Keine Zeitbegrenzungen: Um ausreichend Zeit zum Lesen der Inhalte zu gewährleisten, liegen keine Zeitlimits bei der Präsentation deiner Inhalte vor (bspw. durch automatisch abspielende Videos).

  • Keine aggressiv blinkenden oder flackernden Inhalte: Diese können bei empfindlichen Menschen Krampfanfälle auslösen und sollten vermieden werden. Generelle Regel: Inhalt, der mehr als drei mal pro Sekunden blinkt, ist potenziell gefährlich.

  • Durchdachtes Layout: Stell Navigations- und Orientierungshilfen zur Verfügung, um Inhalte auffindbar zu machen und Nutzern zu zeigen, wo sie sich befinden.

Inhalte sollten für eine große Gruppe an Menschen verständlich sein. Dazu gehören auch geistig eingeschränkte Menschen, sensorische Behinderungen, Fremdsprachler und normale Nutzer.

  • Strukturiertes Design: Der Aufbau und die Benutzung Ihres Internetauftritts sind für den Nutzern intuitiv verständlich und vorhersehbar. Ihre Navigation ist konsistent und muss nur einmal gelernt werden.

  • Sichere Fehlervermeidung: Bei Eingabefehlern in Formularen werden die falschen Elemente aufgezeigt und in Textform beschrieben.

  • Sinnvolle Beschriftungen: Notwendige Eingaben werden mit Hinweisen oder erklärenden Beschriftungen versehen. Linktexte werden beudeutungsvoll mit dem Ziel anstellen von “klicke hier” beschrieben.

Deine Inhalte sollten über verschiedene Plattformen erreichbar sein und mit der Zeit des technologischen Fortschritts gehen. Erstelle daher Inhalte basierend auf gültigen HTML- und Design-Standards.

  • Kompatibilität: Die Integration assistiver Technologien ist gewährleistet, da jeder Internetauftritt mit Screenreadern verwendet werden kann.

  • Korrektheit: Die Struktur barrierefreier Inhalte ist semantisch und kann durch eine Vielzahl von Endgeräten interpretiert werden.

Wie kann ich meine Inhalte prüfen?

Unser Beitrag kratzt natürlich nur an der Oberfläche des barrierefreien Internets. Wir hoffen, dass du dennoch einen groben Überblick über das Thema bekommen hast.

Möchtest du deine Webinhalte auf Barrierefreiheit prüfen, so kannst du für einen ersten Überblick mit kostenlosen Browserplugins starten (LERA, WAVE).

Barrierearme Internetauftritte lohnen sich

Zweifellos ist die Einhaltung dieser Richtlinien erstmal mit Aufwand verbunden, bieten aber im Gegenzug auch langfristige Vorteile.

Erhöhte Sichtbarkeit

Erreiche mehr Menschen in deiner Zielgruppe mit deinem Internetauftritt.

Zufriedenere Nutzer:innen

Steigere durch barrierearme Bedienbarkeit die Zufriedenheit aller Nutzer:innen.

Positiveres Ranking

Erhöhe die Reichweite deines Internetauftritts in Suchmaschinen.

Digitales Vorbild

Übernimm eine Vorbildfunktion für Internetauftritte in deiner Branche.

Mehr Beteiligung für alle

Du zeigst soziale Verantwortung und förderst die digitale Teilhabe.


Teile diesen Beitrag, wenn er dir gefallen hat: Teilen:

Wer hat's geschrieben?

Richard Repenning

Portraitbild des Autors Richard Repenning
Richard ist Frontend-Entwickler bei descript und damit der Experte für alle Themen, die das Aussehen und Verhalten von Webseiten und Anwendungen für Besucher:innen betreffen.
Lass uns im Gespräch bleiben

Du findest den Beitrag spannend?

Das Thema des Beitrages interessiert dich? Du möchtest dich darüber austauschen, deine Meinung kundtun oder zukünftig mehr von uns lesen? Dann folge uns auf unseren Kanälen bei Instagram und Facebook.