Meine Merkliste Geteilte Merkliste

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

Digitale Inklusion Was ist (Digitale) Inklusion? "nachrichtenleicht": Nachrichten in einfacher Sprache Wie inklusiv ist die politische Bildung zur Bundestagswahl im Netz? Programmieren leicht gemacht Barrierefreie Lern-Apps Barrierearmes Gaming: Fenster zur Welt Digitale Inklusion in der Bildung – Beispiel Bremen Unterstützte Kommunikation in der Praxis Wörterbuch für Leichte Sprache Kleines 3x3 der Digitalen Inklusion Sensibilisieren für Barrieren: "Wheelmap macht Schule" Fortsetzung: Fünf Tipps für ein barrierefreies Webdesign Fünf Tipps für ein barrierefreies Webdesign Unsere 10 wichtigsten Beobachtungen zur (digitalen) Inklusion Digitale Inklusion – auf Augenhöhe "Die Kreidezeit ist vorbei" (Digitale) Inklusion Inklusiv lehren – Stand der Dinge in Schule und Weiterbildung Digitale Inklusion – digitale Exklusion: Teilhabe in einer digitalen Gesellschaft "Allen Menschen gegenüber erstmal offen auftreten" "Die wissen überhaupt nicht, was Inklusion ist"

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

Jan Eric Hellbusch

/ 4 Minuten zu lesen

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.

(Joshua Ganderson/ Flickr/ bearbeitet ) Lizenz: cc by/2.0/de

Dieser Text ist der zweite Teil an Tipps zum barrierefreien Webdesign. Lesen Sie hier den ersten Teil:
Interner Link: 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: Externer Link: Ü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 "

  • Formularbeschriftungen sollten immer beschreibend sein, d. h. wenn wie bei Screenreadern nur die Formularbeschriftungen aufgelistet werden, dann sollte jedes Feld eindeutig zuzuordnen sein.


    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.


Ü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 [Externer Link: http://www.barrierefreies-webdesign.de/knowhow/landmark-roles/] deutlich zu verbessern.

Tipp #8: Installieren Sie die Externer Link: 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 Externer Link: 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 Externer Link: 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 Externer Link: 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 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.

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.