Abschnitt 10.6 - 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 aktuellen Webdesigns und ein Paradebeispiel dafür, wie barrierefreie Praktiken sich für die Mehrheit der Benutzerinnen 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 % Textvergrößerung.
Abb. 68
Sprungmarke "Zum Inhalt" wird sichtbar bei Aktivierung mit der Tastatur
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 (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 bekannten 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 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 und Wert von assistiven Technologien erkannt werden können. 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-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 Programmiersprachen 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.