Fünf Tipps für ein barrierefreies Webdesign | Digitale Inklusion | bpb.de

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 Externer Link: 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 Externer Link: 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 Externer Link: 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 Externer Link: Tastatur gewährleistet wird.

• Menschen mit Lernbehinderungen benötigen u. a. Externer Link: 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 Externer Link: 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 Externer Link: 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 Externer Link: 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 Externer Link: 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 Externer Link: Audiodeskription eine spezialisierte Aufgabe.
  
  Eine Übersicht von Richtlinien und Tools für verschiedene Techniken (z. B. Flash, HTML5 oder YouTube) ist Externer Link: hier zu finden.
  
  Tipp #5: Prüfen Sie bei YouTube-Videos, ob der gesprochene Text über einen Button als Untertitel eingeblendet werden kann.
  
  

  
  
  Im Hinblick darauf, dass sich Inklusion immer stärker in der Gesellschaft verankert, gewinnt die Barrierefreiheit zunehmend an Bedeutung. Barrierefreiheit ist aber zu umfassend, als dass sie kurzfristig umgesetzt werden kann. Wenn Barrierefreiheit allerdings als ständiger Verbesserungsprozess verstanden wird, können einzelne Aspekte sukzessive und nutzerorientiert umgesetzt werden. Und – obwohl Konformität zu den Standards wichtig ist – 100-prozentige Barrierefreiheit bleibt immer ein Ziel, kein Zustand.
  
  

  Lesen Sie hier weitere Tipps zum barrierefreien Webdesign:
  Interner Link: Fortsetzung: Fünf Tipps für ein barrierefreies Webdesign

  
  
  

  Über den AutorJan Eric Hellbusch

  Jan Eric Hellbusch ist seit 2005 freiberuflicher Berater für barrierefreies Webdesign, publiziert zu diesem Thema und begleitet Unternehmen und Organisationen bei der Umsetzung der Barrierefreiheit im Internet. Auf seiner Website Externer Link: Barrierefreies Webdesign finden sich weiterführende Informationen zum Thema.