Eindruck vom Hackathon, Entwicklung von Prototypen

Jan Eric Hellbusch am 15.03.2016

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.

Blinder Computernutzer mit bildschirmlosem ComputerInklusion in und mit Medien: Was muss sich beim Webdesign ändern? Lizenz: cc by/2.0/de (Joshua Ganderson/ Flickr/ bearbeitet )



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.

    Screenshot: Die Webseite werkstatt.bpb.de ohne BilderanzeigeSo sieht die Webseite werkstatt.bpb.de aus, nachdem die Anzeige von Bildern in den Browsereinstellungen abgeschaltet wurde. Lizenz: cc by-sa/3.0/de (bpb)



    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.

    Überprüfung von Farbkontrasten auf netzdebatte.bpb.de ergibt ein Kontrasverhältnis von 6,7:1Überprüfung von Farbkontrasten auf der Webseite netzdebatte.bpb.de. Lizenz: cc by-sa/3.0/de (bpb)



    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.

    Video von werkstatt.bpb.de, bei dem man über den Player Untertitel ein- und ausblenden kannIn diesem Werkstatt-Video kann der gesprochene Text als Untertitel eingeblendet werden. (bpb) Lizenz: cc by-sa/3.0/de



    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:
    Fortsetzung: Fünf Tipps für ein barrierefreies Webdesign



    Über den Autor

    Jan 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 Barrierefreies Webdesign finden sich weiterführende Informationen zum Thema.



    Creative Commons License Dieser Text ist unter der Creative Commons Lizenz veröffentlicht. by-sa/3.0
    Urheberrechtliche Angaben zu Bildern / Grafiken / Videos finden sich direkt bei den Abbildungen.

    counter

    Ihr Kommentar:

    (*) Diese Felder sind Pflichtfelder

    Ihr Kommentar wird von der Redaktion geprüft und dann freigeschaltet



     
  • Newsletter werkstatt.bpb.de

    Der Werkstatt-Newsletter informiert regelmäßig über Neuigkeiten und Aktivitäten des Projekts werkstatt.bpb.de. Melden Sie sich gleich an!

    *Pflichtfeld
    Weiter... 

    Quiz: Digitale Zivilgesellschaft

    Quiz – Von Klicktivismus bis Fake News

    Digitale Partizipation – das kann ein Like unter einem politisch motivierten Facebook-Post sein, die Meldung einer Fake News oder das Unterschreiben einer Online-Petition. Testen Sie Ihr Wissen rund um das Thema "Digitale Zivilgesellschaft" in unserem Quiz. Weiter... 

    Archiv #PB21

    Archiv pb21.de

    Was bedeutet Web 2.0 für die politische Bildung? Das Archiv des Weblogs pb21.de bietet Praxisbeispiele, Anleitungen und Tipps um das Web 2.0 als Werkzeug der politischen Bildung. Weiter... 

    Werkstatt.bpb.de Archiv

    Archiv werkstatt.bpb.de

    Im Archiv von werkstatt.bpb.de finden Interessierte viele informative Artikel, Interviews und Videos zum Thema zeitgemäße Vermittlung von Zeitgeschichte und Politik in Schulen und in der außerschulischen Bildung vor dem Hintergrund aktueller Herausforderungen wie Migration und Digitalisierung. Weiter... 

    Spezial

    OER - Material für alle

    Über den Einsatz sogenannter Open Educational Resources (OER) im Unterricht wird schon seit einigen Jahren diskutiert. In den Schulen selbst jedoch führt das Thema noch immer ein Schattendasein. Dieses Spezial soll Abhilfe schaffen: Die Beiträge liefern Grundlagen zum Thema freie Bildungsmaterialien und bieten Hilfestellungen, um OER von der Theorie in die schulische Praxis zu überführen. Weiter...