Fünf Tipps für ein barrierefreies Webdesign
Digitale Inklusion bedeutet auch: Menschen mit Behinderungen eine selbstbestimmte Nutzung von digitalen Angeboten zu ermöglichen. Wie das konkret geht, haben wir Jan Hellbusch, Accessibility-Consultant und Autor, gefragt. Er hat fünf Tipps für Einsteiger zusammengestellt.
Wenn in einem Webprojekt die Barrierefreiheit auf der Agenda steht, dann stellt sich oft die Frage, welcher Schritt der erste sein sollte. Barrierefreies Webdesign ist keinesfalls trivial. Die folgenden Tipps sollen Ihnen den Einstieg in das Thema erleichtern.
An welchen Richtlinien kann ich mich orientieren?
Eine umfassende Beschreibung der zu genügenden Anforderungen in 61 Erfolgskriterien bieten die »Richtlinien für barrierefreie Webinhalte« (englisch: "Web Content Accessibility Guidelines 2.0", kurz: WCAG 2.0). Die WCAG 2.0 sind eine Empfehlung des World Wide Web Consortiums und wurden 2008 verabschiedet. In den Richtlinien werden auch die Regeln für Konformität – die Erfüllung aller Anforderungen der Richtlinie – angegeben.
In Deutschland gelten verschiedene Verordnungen mit heterogenen Kriterien. Die für die Bundesverwaltung relevante "Barrierefreie Informationstechnik-Verordnung 2.0" (kurz: BITV 2.0) enthält neben einem Auszug der WCAG 2.0 auch weitergehende Anforderungen an Leichte Sprache und Gebärdensprache.
Tipp #1: Die Orientierung an den Web Content Accessibility Guidelines (WCAG 2.0) erlaubt eine zuverlässige Erreichung der Konformität, nicht zuletzt aufgrund der ausführlichen »Dokumentation«. Beginnen Sie dort mit der niedrigsten Konformitätsstufe (Konformitätsstufe A).
Welche Nutzerinnen und Nutzer soll mein Angebot erreichen?
Bei der Barrierefreiheit geht es um Menschen mit Behinderungen – eine sehr heterogene Zielgruppe. Vor der Umsetzung eines barrierefreien Webdesigns sollten Sie sich daher die Arbeitsweisen und spezifischen Anforderungen der verschiedenen Nutzergruppen vergegenwärtigen:
- Blinde Nutzer und Nutzerinnen verwenden so genannte Screenreader, um Bildschirminhalte mithilfe nicht-visueller Ausgabegeräte (akustisch über eine Sprachausgabe oder tastbar über eine so genannte Braillezeile) zu vermitteln. Screenreader wiederum stützen sich auf den Accessibility-Tree eines Betriebssystems (Der »Accessibility-Tree« ist eine Schnittstelle des Betriebssystems. Dorthin liefern Anwendungen wie Browser Informationen über die Benutzungsschnittstelle, wo sie dann von Screenreadern abgeholt und verarbeitet werden.).
- Wichtige Aspekte für die Webentwicklung für Sehbehinderte sind – neben der eingeschränkten Wahrnehmung von visuellen Inhalten – insbesondere die Anpassung der Bildschirmeinstellungen und der Einsatz von Vergrößerungssystemen.
- Manche Nutzer und Nutzerinnen mit körperlichen Einschränkungen können den Mauszeiger (oder die Tastatur) nicht benutzen. Wichtig für das Webdesign ist aber, dass die Nutzbarkeit sämtlicher Funktionen per »Tastatur« gewährleistet wird.
Menschen mit Lernbehinderungen benötigen u. a. »Leichte Sprache«. Anforderungen hierzu finden sich in den entsprechenden Webstandards leider kaum.
- Für gehörlose Nutzer und Nutzerinnen sind insbesondere akustische Informationen auch in Textform anzubieten. Die Übersetzung von Inhalten in Gebärdensprache ist nach den Webstandards nur für Audio-Inhalte in Videos gefordert. Die BITV 2.0 legt zusätzlich fest, dass Startseiten einige einführende Informationen in Gebärdensprache enthalten müssen.
Tipp #2: Wenn Sie einen Screenreader in Aktion sehen wollen, installieren Sie die kostenlose Software »NVDA«.
Was braucht ein Screenreader?
Um eine für Screenreader nutzbare Webseite zu erstellen, sollten u. a. Grafiken jeder Art mit einem Alternativtext beschrieben werden. Grundsätzlich ist dabei zwischen leeren, identifizierenden, funktionalen und beschreibenden »Alternativtexten« zu unterscheiden:
- Ein leerer Alternativtext (alt="") führt dazu, dass ein Screenreader eine Grafik ignoriert. Leere Alternativtexte sind daher nur für rein dekorative Grafiken einzusetzen.
- Viele Grafiken haben eine inhaltliche Bedeutung, werden aber im Fließtext bereits erläutert. Das können Zahlenwerte in einem Diagramm sein oder die Handlung einer Person auf einem Foto. Wenn eine Grafik den umgebenden Text lediglich veranschaulicht, reicht ein knapper identifizierender Alternativtext, z. B. alt="Der Ministerpräsident auf dem roten Teppich".
- Wenn Grafiken verlinkt sind oder in anderer Weise anklickbar sind, dann benötigen sie einen funktionalen Alternativtext. Das Lupen-Symbol für die Suche muss z. B. mit "Suchen" (und nicht mit "Lupe") bezeichnet werden.
- Bilder, die nicht im Kontext beschrieben werden, benötigen einen beschreibenden Alternativtext. Wichtig für den Alternativtext sind Informationen, die nur in der Grafik ermittelt werden können. Weil Alternativtexte knapp formuliert werden sollten (nicht länger als 100 Zeichen lang), muss für manche Bildbeschreibungen eine zusätzliche lange Beschreibung in Erwägung gezogen werden. Das bedeutet, dass eine zusätzliche Erläuterung auf der gleichen Seite an anderer Stelle oder auf einer anderen Seite mit dem Bild verknüpft wird z. B. mit dem »Longdesc-Attribut«.
Tipp #3: Schalten Sie in Ihren Browsereinstellungen die Anzeige von Bildern ab und beurteilen Sie, ob wesentliche Informationen auf einer Webseite fehlen.
Was muss ich beim Einsatz von Farbe und Kontrast beachten?
Farbe kann und soll zur Hervorhebung eingesetzt werden. Allerdings können gleich zwei Nutzergruppen benachteiligt werden, wenn Sie folgende zwei Punkte nicht beachten:
- Wenn Sehbehinderte die Bildschirmeinstellungen ändern (z. B. mit einem Kontrastmodus), dann ist mindestens eine weitere visuelle Hervorhebung (z. B. Fettung) notwendig, um die ursprünglich beabsichtigte Wirkung wahrzunehmen.
- Für Screenreader sind visuelle Formatierungen ohne Belang. Screenreader benötigen strukturelle oder textliche Hervorhebungen. Ein hervorgehobener Eintrag in der Navigation (womit die aktuelle Seite angezeigt wird) sollte z. B. nicht verlinkt sein.
In der WCAG 2.0 werden einige weitere Anforderungen an die visuelle Wahrnehmung gestellt. Insbesondere sollten die Kontrastanforderungen beachtet werden.
Tipp #4: Installieren Sie die »Web Accessibility Toolbar« und untersuchen Sie die Helligkeitskontraste zwischen Text und Hintergrund mit dem Color Contrast Analyzer. Das minimale Kontrastverhältnis für normalen Text beträgt 4,5:1.
Wie kann ich Multimedia barrierefrei(er) einsetzen?
Multimediale Inhalte bieten sehr viele Möglichkeiten der Informationsvermittlung. Um akustische und visuelle Informationen barrierefrei anzubieten, sind umfangreichere Maßnahmen erforderlich:
- Zur Vermittlung von akustischen Informationen sollten Untertitel eingesetzt werden. Gesprochene Inhalte können automatisch in Text umgewandelt werden, aber eine redaktionelle Korrektur ist anschließend fast immer notwendig.
- Zur Vermittlung von visuellen Informationen sollte Audiodeskription eingesetzt werden. Audiodeskriptionen sind Audio-Dateien, die zu einem Video zugeschaltet werden können. Automatisierte Verfahren, um Gestik, Landschaften oder Farben zu beschreiben, gibt es bislang nicht. Vielmehr ist die »Audiodeskription« eine spezialisierte Aufgabe.
Eine Übersicht von Richtlinien und Tools für verschiedene Techniken (z. B. Flash, HTML5 oder YouTube) ist »hier zu finden«.
Tipp #5: Prüfen Sie bei YouTube-Videos, ob der gesprochene Text über einen Button als Untertitel eingeblendet werden kann.
Dieser Text stammt von bpb.de.
Autor: Jan Eric Hellbusch
Lizenz: Creative Commons by-sa/3.0/
Rechtlicher Hinweis
Die auf diesen Seiten vorhandenen rechtlichen Ausführungen stellen keine Rechtsberatung im Sinne des Rechtsdienstleistungsgesetzes dar. Die Betreiber der Webseite haften nicht für die Inhalte. Trotz sorgfältiger Prüfung kann zudem nicht ausgeschlossen werden, dass Angaben fehlerhaft oder veraltet sind.