DGUV Information 215-450 - Softwareergonomie (DGUV Information 215-450)

Online-Shop für Schriften

Jetzt bei uns im Shop bestellen

Jetzt bestellen
Abschnitt 10.6, 10.6 Technische Umsetzung der Gestaltungsric...
Abschnitt 10.6
Softwareergonomie (DGUV Information 215-450)
Titel: Softwareergonomie (DGUV Information 215-450)
Normgeber: Bund
Amtliche Abkürzung: DGUV Information 215-450
Gliederungs-Nr.: [keine Angabe]
Normtyp: Satzung

Abschnitt 10.6 – 10.6 Technische Umsetzung der Gestaltungsrichtlinien

WCAG 2.0 ist eine Richtlinie an der Schnittstelle von Ergonomie und Technik. In den vier Prinzipien spiegeln sich die Anforderungen von Menschen mit Behinderungen, die mit eingeschränkten Fähigkeiten und assistiven 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. Die ergonomische Zielsetzung und der Anwendungskontext sind jedoch bei den Webentwicklerinnen und -entwicklern noch nicht allgemein bekannt, wie die häufigen Fehler in der Implementierung der empfohlenen Techniken zeigen. 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, also den Inhalt oder die Funktion des Bildes wiedergeben, sodass die Information auch dann zur Verfügung steht, wenn das Bild ausfällt, etwa weil es bei geringer Bandbreite nicht geladen wurde oder weil Blinde es nicht wahrnehmen können.

Alternativtexte müssen sinnvoll und angemessen sein. Der genaue Wortlaut ist eine Aufgabe der User-Interface-Designerin bzw. des User-Interface-Designers oder der Autorin bzw. 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 trifft man also auf Internetseiten vor allem dann an, 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 ist.

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 Screenreaderbenutzerinnen oder -benutzer mit einem Tastaturshortcut 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 (softwaremäßige Formatvorlagen) 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 5) zurückzugreifen. WCAG 2.0 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 man muss seitwärts scrollen, was die Orientierung und das Leseverständnis erschwert. Ein weitergehendes Erfolgskriterium für Level AAA/Priorität II ist daher, dass die Inhalte bei einer Vergrößerung von 200 % ohne Seitwärtsscrollen gelesen werden können. Dieses Verhalten ist mit der Textvergrößerung erreichbar, die nur die Schrift vergrößert, während die Inhalte nach unten umbrechen und nicht breiter als der Bildschirm werden. Dieses fluide Layout basiert auf einer Vielzahl von CSS-Techniken, u. a. auf dem Einsatz relativer Schriftgrößen und der relativen Bemaßung von Abständen.

Eine konsequente Fortsetzung findet das fluide Layout im Responsive Design, der 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 aktuellen Webdesigns und ein Paradebeispiel dafür, wie barrierefreie Praktiken sich für die Mehrheit der Benutzerinnen und Benutzer auszahlen.

Tastaturbedienung

Motorisch eingeschränkte Menschen und Blinde sind zur Bedienung von Software auf die Tastatur angewiesen, daher muss alle Funktionalität vollständig mit der Tastatur erreichbar sein. HTML-Seiten sind für Tastaturbedienung eingerichtet. Links und Formularelemente können mit der Tab-Taste ausgewählt (fokussiert) und mit Enter oder Space aktiviert werden. Ergänzend können Sprungmarken eingesetzt werden, um Gruppen von Links zu überspringen und direkt zum Ziel zu kommen (Abbildung 58). Shortcuts sind auf HTML-Seiten nur begrenzt einsetzbar, da das dafür vorgesehene access-key-Attribut mit den Shortcuts der diversen Browser konkurrieren muss.

Abb. 58 Sprungmarke "Zum Inhalt" wird sichtbar bei Aktivierung mit der Tastatur.

Die HTML-Ausstattung für Tastaturbedienung genügt nicht mehr, wenn große Portalsysteme oder komplexe Web-Anwendungen zu bewältigen sind. Mit Javascript und WAI-ARIA kann eine differenzierte Tastatursteuerung aufgebaut werden, wie sie aus Desktop-Anwendungen bekannt ist. Entsprechende Ansätze gibt es in den bekannten Javascript-Bibliotheken.

Eine effiziente Tastaturbedienung erfordert, dass

  • eine sinnvolle Tab-Reihenfolge besteht,

  • die Auswahl gut sichtbar ist,

  • die Auswahl bei allen Bedienschritten mitgeführt wird,

  • die Tastaturbefehle gut merkbar und dokumentiert sind.

Technische Robustheit

Internetseiten sind robust, wenn man sie mit allen Browsern und Anzeigegeräten und insbesondere auch mit assistiven Technologien nutzen kann, ohne dass Inhalte oder Funktionen verloren gehen.

Eine Voraussetzung für die Kompatibilität mit einer Vielzahl von Technologien ist die formale Richtigkeit der Kodierung. Valides HTML, das den Syntaxcheck des W3C besteht, ist also ein Erfolgskriterium für barrierefreie Websites.

Die Bedeutung von Bedienelementen muss in den Dimensionen Name, Rolle, Wert programmatisch erkennbar sein, damit sie von assistiven Technologien ausgewertet werden kann. HTML bringt diese Qualität von Haus aus mit, wie oben unter "Semantische Strukturierung" ausgeführt wurde. In gleicher Weise müssen sich auch andere Formate zu erkennen geben. Auch Dokumente in PDF und E Books in E PUB müssen "getaggt" sein, also auf programmtechnisch erkennbare Weise in Überschriften, Absätze, Listen etc. gegliedert sein. Anwendungen in Javascript, Flash® oder anderen Programmiersprachen müssen, ähnlich wie HTML-Formulare, ihre Bedienelemente programmatisch erkennbar machen. Von Vorteil ist z.B., wenn ein Javascript-Widget wie die Baumstruktur oder der Schieberegler mit den semantisch passenden HTML-Elementen aufgebaut wird. Ergänzend stehen WAI-ARIA-Attribute zur Verfügung, um weitere Semantik und Verhalten hinzuzufügen.