Eindruck vom Hackathon, Entwicklung von Prototypen

Jan Eric Hellbusch am 22.08.2016

Fortsetzung: Fünf Tipps für ein barrierefreies Webdesign

Der Einstieg in barrierefreies Webdesign ist nicht immer einfach. Im zweiten Teil der Reihe zum Thema gibt Jan Hellbusch Tipps für die Einbindung multimedialer Inhalte, für Formulare, die Strukturierung und die Tastaturbedienung von Webseiten.

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 )

Dieser Text ist der zweite Teil an Tipps zum barrierefreien Webdesign. Lesen Sie hier den ersten Teil:
Fünf Tipps für ein barrierefreies Webdesign
.

Webseiten mit dynamischen Inhalten



Für barrierefreies Webdesign können dynamisch ausgetauschte Inhalte auf Webseiten ein Problem sein. Zum einen stellen z. B. Bilder-Karussells, Laufschriften oder Videos eine Ablenkung für manche Nutzerinnen und Nutzer dar, die dazu führen kann, dass sie nicht mehr mit der Webseite interagieren können. Zum anderen stellen dynamische Inhalte eine Zeitbeschränkung für das Lesen oder Bedienen von Inhalten dar, was vor allem kritisch ist, wenn Nutzerinnen und Nutzer langsamer lesen oder den Mauszeiger nicht bedienen können. Auch automatisch startende Audio-Inhalte können sich störend auf Nutzerinnen und Nutzer auswirken, insbesondere wenn der Nutzer oder die Nutzerin auf eine Sprachausgabe angewiesen ist.

Solche automatisch startenden Inhaltsformen müssen Nutzerinnen und Nutzer also sofort unterbrechen können, sei es mit einem Mausklick oder per Tastatur. Besser ist, auf ablenkende Inhalte zu verzichten bzw. die Nutzer und Nutzerinnen die Dynamik oder den multimedialen Inhalt selbst starten zu lassen.

Tipp #6: Überprüfen Sie, ob Animationen, Videos oder Audios per Tastatur innerhalb weniger Sekunden nach Aufruf der Seite gestoppt werden können.

Wann sind Formulare barrierefrei?



Zur Interaktion mit Nutzerinnen und Nutzern verwenden viele Webseiten Formulare. Ein Formular ist erst dann zugänglich und nutzbar, wenn seitens der Entwicklung alles dafür getan wurde, Fehleingaben zu vermeiden.
  • Zunächst gilt, dass es für jedes Formularfeld eine textliche Anweisung oder eine Beschriftung geben muss, damit jeder Nutzer und jede Nutzerin weiß, welche Eingabe erwartet wird. Dazu zählt auch, dass Pflichtfelder und Felder mit einem vorgegebenen Wertebereich (z. B. Datumsfelder, Mengenangaben in Zahlen) entsprechend gekennzeichnet werden.
  • Wenn sichtbare Beschriftungen genutzt werden, dann sind sie mit "< label >" mit dem zugehörigen Feld im Formular zu verknüpfen. Wenn keine Beschriftungen vorhanden sind, müssen andere Techniken eingesetzt werden, um die Formularfelder zu bezeichnen (z. B. ein title-Attribut).
  • Formularbeschriftungen sollten immer beschreibend sein, d. h. wenn wie bei Screenreadern nur die Formularbeschriftungen aufgelistet werden, dann sollte jedes Feld eindeutig zuzuordnen sein.


    Gutes Beispiel: Auflistung von Formularfeldern im Screenreader JAWS mit Beschriftungen und Kennzeichnung von Pflichtfeldern.So sollte es aussehen: Auflistung von Formularfeldern im Screenreader JAWS mit Beschriftungen und Kennzeichnung von Pflichtfeldern.
    Auflistung von Formularfeldern im Screenreader JAWS mit unzureichender Beschreibung und ohne eindeutige Zuordnung der einzelnen Felder.
Auflistung von Formularfeldern im Screenreader JAWS mit unzureichender Beschreibung und ohne eindeutige Zuordnung der einzelnen Felder.



















Über die Beschriftung hinaus muss auch die Anzeige von Fehleingaben barrierefrei gestaltet werden. Eine Fehleranzeige darf farblich gekennzeichnet werden, benötigt aber auch einen Texthinweis. Außerdem sollten bei der Fehleranzeige nach Möglichkeit Korrekturvorschläge berücksichtigt werden.

Tipp #7: Rufen Sie eine Seite mit Formularen auf, und klicken Sie auf die textlichen Beschriftungen. Nur wenn der Fokus dadurch zum Formularfeld wechselt, ist die Beschriftung mit dem Eingabefeld korrekt verknüpft.

Was ist beim Thema "Strukturen" zu beachten?



Die Strukturierung von Inhalten auf einer Webseite trägt viel zur Verständlichkeit bei und erleichtert Nutzerinnen und Nutzern die Navigation, insbesondere bei der Nutzung von Screenreadern. Die Webstandards zur Barrierefreiheit verlangen, dass das, was am Bildschirm an Strukturen erkennbar ist, auch mit einem Screenreader oder bei vereinfachter Bildschirmdarstellung (z. B. im Kontrastmodus, im Internet Explorer mit "linkeAlt+linkeUmschalt+Drucken" einstellbar) wahrgenommen werden kann. Für die meisten Inhalte bedeutet das, dass die Inhalte einer Webseite korrekt mit Überschriften, Absätzen, Listen und Datentabellen aufbereitet werden müssen.

Neben den "klassischen" Elementen für die Strukturierung von Inhalten können inzwischen zahlreiche weitere Elemente eingesetzt werden. Viele der neueren Elemente aus HTML5 bieten eine verbesserte Semantik. So können beispielsweise Regionen auf einer Seite mit Elementen wie "< nav >" oder "< main >" ausgezeichnet werden, um die Navigation innerhalb einer Seite mit einem Screenreader [http://www.barrierefreies-webdesign.de/knowhow/landmark-roles/] deutlich zu verbessern.

Tipp #8: Installieren Sie die Web Accessibility Toolbar und untersuchen Sie Überschriften, Absätze, Listen und Datentabellen auf einer Webseite. Sämtliche Inhalte müssen in strukturierenden Elementen gefasst sein.

Ist jede Seite auch per Tastatur zugänglich?



Die Tastaturbedienung auf Webseiten wird in der Webentwicklung oft vernachlässigt. Das gilt insbesondere für Bereiche von Webseiten mit dynamischen Inhalten.

Im Gegensatz zu Mausnutzern, die den Mauszeiger zu einem Element auf dem Bildschirm bewegen, sind Tastaturnutzer in vielen Fällen auf den Systemfokus angewiesen. Mit der Tab-Taste kann ein Link oder Formularfeld fokussiert werden. Um andere Elemente auf einer Webseite zu fokussieren, muss die Tab-Taste – manchmal sehr häufig – betätigt werden. Deshalb sind schon kleine Verbesserungen bei der Tastaturbedienung oft sehr effizienzsteigernd für diejenigen Nutzerinnen und Nutzer, die einen Mauszeiger nicht steuern können.

Neben der grundsätzlichen Bedienbarkeit per Tab- und Eingabetaste gibt es weitere Kriterien zu beachten:
  • Fokus-Reihenfolge (die der visuellen Anordnung folgen soll),
  • Sichtbarkeit des Fokus (die browserübergreifend sichergestellt werden muss) und
  • Vermeidung von Kontextänderungen (vor allem in dynamischen Anwendungen darf der Fokus nicht manipuliert werden).
Auf vielen Seiten reicht die Zugänglichkeit aus, wenn aktive Inhalte per Tab-Taste erreicht und per Eingabetaste bedient werden können. Für komplexere Widgets muss ein erweitertes Fokus-Management berücksichtigt werden.

Tipp #9: Prüfen Sie, ob Ihre Webseiten per Tastatur vollständig zugänglich und bedienbar sind. Fangen Sie mit der Tab-Taste an.

Wann spielen Maßnahmen zur Barrierefreiheit eine Rolle?



Vor allem in größeren Organisationen muss das Know-how zum Thema Barrierefreiheit bei vielen Personen liegen. Viele Aspekte der Barrierefreiheit lassen sich zwar in Software-Anwendungen automatisieren, aber letztlich müssen Anwenderinnen und Anwender geschult und Erkenntnisse dokumentiert werden. Eine Organisation muss in der Lage sein, die Barrierefreiheit auf Webseiten (im Rahmen von Qualitätskontrollen) selbst zu beurteilen.

Barrierefreiheit wird immer wieder mit Engagement vorangebracht, aber sie wird nur dann auf einem hohen Qualitätsniveau bleiben, wenn Maßnahmen zur barrierefreien Gestaltung langfristig und verantwortungsbewusst angelegt werden. Im Laufe der Zeit wird Software aktualisiert, werden neue Mitarbeiterinnen und Mitarbeiter mit den Aufgaben betraut und die Anforderungen an den Webauftritt wandeln sich. In allen diesen Situationen muss sichergestellt werden, dass die Anforderungen an Barrierefreiheit aufrecht erhalten bleiben. Deshalb kann Barrierefreiheit nur gelingen, wenn sie als Führungsaufgabe verstanden wird.

Tipp #10: Vermeiden Sie es, die Barrierefreiheit am Ende eines Entwicklungsprozesses prüfen zu lassen. Die Qualitätssicherung muss bei der Konzeption und der Umsetzung angesiedelt werden. Das Thema Barrierefreiheit sollte in allen Bereichen des Unternehmens und Entwicklungsprozesses verankert sein.

Zusätzliche Informationen

Barrierefreies Webdesign ist eine nutzerorientierte Webgestaltung. Die Kriterien werden dabei in den Richtlinien für barrierefreie Webinhalte (englisch: "Web Content Accessibility Guidelines 2.0", kurz: WCAG 2.0) festgehalten und dokumentiert. Die Richtlinie selbst ist in der deutschen Gesetzgebung in Form der Barrierefreien Informationstechnik-Verordnung übernommen worden. Es gilt, auf dem Weg zur digitalen Inklusion diesen internationalen Standard Schritt für Schritt zu berücksichtigen.



Ü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...