Barrierefreies Webdesign - Teil 2

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.

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.

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

Dieser Text stammt von bpb.de.

Autor: Jan Eric Hellbusch

Lizenz: Creative Commons by-sa/3.0/