Technische Umsetzung der

WCAG 2.1 ist eine Richtlinie an der Schnittstelle von Ergo-nomie 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 hoch wertiges 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 Anforde-rung an barrierefreies Webdesign. Für alle Bildelemente, seien es Symbole, Infografiken oder Fotos, müssen Al-ternativtexte vorhanden sein. Die AlAl-ternativtexte 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 Auf-gabe des User-Interface-Designers oder des Autors.

Der Alternativtext soll den Inhalt des Bildes knapp be-nennen. Bei verlinkten Bildern (Icons, Logos, Schalt-flächen) soll der Alternativtext das Ziel des Links bzw.

die ausgelöste Aktion benennen. Rein dekorative Bilder mit nur un bedeutendem Inhalt werden durch ein leeres ALT-Attribut vor dem Screenreader verborgen. Informa-tive Bilder (Diagramme, Fotos) benötigen eine ausführ-liche 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 pas-senden 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 ver-schaffen. 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, Haupt-inhalt 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 ver-wenden und nicht zu Layout-Zwecken zu missbrauchen.

Vielfach wird bereits die Verwendung von Stylesheets, also separat gespeicherten Formatvorlagen, die für die

Barrierefreie Gestaltung von Software

g esamte Website gelten, als „standardkonform“ bezeich-net, was im Sinne der Barrierefreiheit zu kurz gegriffen ist.

Vergrößerung

Die oft gestellte Frage nach einer ausreichenden Schrift-größe wird aus Sicht der Barrierefreiheit nicht beantwor-tet, 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 imple-mentiert werden, mit mehr oder weniger Komfort bei der Benutzung. Die einfachste Form ist der Seitenzoom, eine Funktion des Browsers, die keine besonderen Eigen-schaften 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 Orien-tierung 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 Erfolgskrite-rium 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, Tab-lets und Breitbildmonitore. Hierbei werden in Abhängig-keit von der Bildschirmgröße verschiedene Layouts defi-niert, 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 Benutze-rinnen und Benutzer auszahlen.

Überlagerung – das darf nicht passieren.

Besser: fluides Layout mit Silbentrennung.

Im Smartphone ist die einspaltige Darstellung von  Formularen üblich.

Abb. 67 Eingabeformular bei 200 % Text vergrößerung.

1

2 2

3 3

1 Barrierefreie Gestaltung von Software

Tastaturbedienung

Motorisch eingeschränkte Menschen und Blinde sind zur Bedienung von Software auf die Tastatur angewiesen, da-her 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 Sprung marken eingesetzt werden, um Gruppen von Links zu überspringen und direkt zum Ziel zu kommen (siehe Abbildung 68).

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 be-kannten Javascript-Bibliotheken.

Eine effiziente Tastaturbedienung erfordert, dass

• eine sinnvolle Tab-Reihenfolge besteht,

• der Tastaturfokus (die aktuelle Eingabeposition) gut sichtbar ist,

• der Tastaturfokus bei allen Bedienschritten erkennbar mitgeführt wird und

• die Tastaturbefehle gut merkbar und dokumentiert sind.

Technische Robustheit

Internetseiten sind robust, wenn sie mit allen Browsern, Anzeigegeräten und insbesondere auch mit assistiven Technologien genutzt werden lönnen, ohne dass Inhalte, Strukturen oder Funktionen verloren gehen.

Eine Voraussetzung für die Kompatibilität mit einer Viel-zahl 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 Dimen-sionen Name, Rolle und Wert von assistiven Technolo-gien erkannt werden können. HTML bringt diese Qualität von Haus aus mit, wie oben unter „Semantische Struk-turierung“ ausgeführt wurde. In gleicher Weise müssen sich auch andere Formate zu erkennen geben. Auch Do-kumente in PDF und E-Book-Dateien in EPUB müssen

„getaggt“ sein, also auf programmtechnisch erkennbare Weise in Überschriften, Absätze, Listen etc. gegliedert sein. Anwendungen in Javascript oder anderen Program-miersprachen müssen, ähnlich wie HTML-Formulare, ihre Bedienelemente programmtechnisch 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.

Abb. 68

Sprungmarke „Zum Inhalt“

wird sichtbar bei Aktivierung mit der Tastatur

Barrierefreie Gestaltung von Software