DGUV Information 215-450: Softwareergonomie / 10.6 Technische Umsetzung der Gestaltungsrichtlinien

WCAG 2.1 ist eine Richtlinie an der Schnittstelle von Ergonomie und Technik. In den vier Prinzipien spiegeln sich die Anforderungen von den Menschen mit Behinderungen wieder, die mithilfe assistiver Technologien das Internet auf vollwertige Weise nutzen wollen.

Barrierefreiheit gilt als Ausweis für qualitativ hochwertiges Webdesign, vor allem weil die technische Umsetzung der Richtlinien eine korrekte Anwendung der Webstandards verlangt. Im Folgenden sollen der technische Aspekt der Barrierefreiheit und das Zusammenspiel von Technik und Ergonomie an einigen Beispielen verdeutlicht werden.

Alternativtexte

"Alternativtexte für Bilder" ist die bekannteste Anforderung an barrierefreies Webdesign. Für alle Bildelemente, seien es Symbole, Infografiken oder Fotos, müssen Alternativtexte vorhanden sein. Die Alternativtexte sollen funktional äquivalent sein. Sie geben den Inhalt oder die Funktion des Bildes wieder. Die Information steht auch dann zur Verfügung, wenn das Bild ausfällt, z. B. weil es bei geringer Bandbreite nicht geladen wurde oder weil Blinde es nicht wahrnehmen können.

Alternativtexte müssen sinnvoll und angemessen sein. Die Formulierung des genauen Wortlautes ist eine Aufgabe des User-Interface-Designers oder des Autors. Der Alternativtext soll den Inhalt des Bildes knapp benennen. Bei verlinkten Bildern (Icons, Logos, Schaltflächen) soll der Alternativtext das Ziel des Links bzw. die ausgelöste Aktion benennen. Rein dekorative Bilder mit nur unbedeutendem Inhalt werden durch ein leeres ALT-Attribut vor dem Screenreader verborgen. Informative Bilder (Diagramme, Fotos) benötigen eine ausführliche Beschreibung, die über die knappe Benennung im ALT-Attribut hinausgeht. Sinnvolle Alternativtexte sind auf Internetseiten also vor allem dann anzutreffen, wenn die Beschäftigten der gesamten Produktionskette, vom User-Interface-Design über die HTML-Entwicklung bis zur Redaktion, in den Anforderungen der barrierefreien Gestaltung geschult sind.

Semantische Strukturierung

Damit Inhalte auf verschiedene Weise dargestellt werden können, ohne dass Information oder Struktur verloren geht, ist eine semantisch korrekte Kodierung in den passenden HTML-Elementen erforderlich. Diese Anforderung gilt für die Inhalte im Detail wie auch für den Aufbau der ganzen Seite. Texte werden als Absätze <p >, Listen <li >, Überschriften <h1 > bis <h6 > ausgezeichnet (getaggt). So können Benutzerinnen und Benutzer von Screenreadern mit einem Shortcut von einer Überschrift zur nächsten springen und sich einen Überblick über die Inhalte verschaffen. Sie erfahren die Anzahl von Elementen in einer Liste und die Art der Eingabefelder in einem Formular. Für die Funktionsbereiche einer Seite, z. B. Navigation, Hauptinhalt und Randspalte, gibt es seit HTML5 ebenfalls die passenden semantischen Elemente.

Semantisch korrektes HTML ist ein Hauptmerkmal der standardkonformen Programmierung, ist aber in der Praxis des Webdesigns noch nicht in voller Konsequenz angekommen. Weithin durchgesetzt hat sich bisher die Regel, Tabellen <table > nur für Datentabellen zu verwenden und nicht zu Layout-Zwecken zu missbrauchen. Vielfach wird bereits die Verwendung von Stylesheets, also separat gespeicherten Formatvorlagen, die für die gesamte Website gelten, als "standardkonform" bezeichnet, was im Sinne der Barrierefreiheit zu kurz gegriffen ist.

Vergrößerung

Die oft gestellte Frage nach einer ausreichenden Schriftgröße wird aus Sicht der Barrierefreiheit nicht beantwortet, hierfür ist auf die allgemeine Softwareergonomie (vgl. Kapitel 7 "Software und Bildschirm") zurückzugreifen. WCAG 2.1 fordert stattdessen, dass alle Inhalte bis zu 200 % vergrößert werden können. Diese Regel unterstützt Menschen mit einer leichten Sehbehinderung, die noch nicht auf eine Bildschirmlupe angewiesen sind.

Die Vergrößerung kann auf verschiedene Weise implementiert werden, mit mehr oder weniger Komfort bei der Benutzung. Die einfachste Form ist der Seitenzoom, eine Funktion des Browsers, die keine besonderen Eigenschaften der Website voraussetzt. Hierbei wird die ganze Seite proportional vergrößert. Wenn die verfügbare Fläche ausgeschöpft ist, überragt die Seite den Bildschirm und es muss seitwärts gescrollt werden, was die Orientierung und das Leseverständnis erschwert. Bei Fehlern im Webdesign kann es passieren, dass bei Vergrößerung Überlagerungen und Verluste von Information entstehen (siehe Abbildung 67). Ein weitergehendes Erfolgskriterium von WCAG 2.1 "Umbruch" verlangt daher, dass die Inhalte bei einer Vergrößerung von 400 % umbrechen, so dass sie ohne Seitwärtsscrollen gelesen werden können. Dies entspricht im Responsive Design der Darstellung im Handy.

Responsive Design ist die Anpassung von Inhalten an sehr verschiedene Anzeigegeräte wie Smartphones, Tablets und Breitbildmonitore. Hierbei werden in Abhängigkeit von der Bildschirmgröße verschiedene Layouts definiert, u. a. eine einspaltige Darstellung für Smartphones. Responsive Design ist eines der zentralen Themen des aktuel...