Accessibility im Web Teil 1: Erstellen einer Webanwendung
Webanwendungen barrierefreier zu gestalten, ist mit nur geringem Mehraufwand und nativen HTML-Elementen möglich. Das zeigt eine Beispielanwendung.
- Andreas Maier
- Bayar Abdullah
Webseiten gelten als barrierefrei, wenn sie konform zu den Web Content Accessibility Guidelines auf Level AA sind. Diese Richtlinien definiert die Web Accessibility Initiative des World Wide Web Consortium (W3C) als internationalen Standard. Level AA bedeutet, dass eine Website für den größten Teil der Anwender verständlich und nutzbar ist. Sämtliche Funktionen sind auch Menschen mit Beeinträchtigungen zugänglich und Hilfstechnologien wie Screenreader können alle relevanten Informationen auslesen, beispielsweise weil Alternativtexte für Grafiken bereitstehen.
Um konform zu Level AA zu sein, müssen auch alle Kriterien auf Level A erfüllt sein. Das sind die essenziellen Barrierefreiheitsaspekte, etwa dass eine Website nur per Tastatur nutzbar ist. Level AAA umfasst alle Kriterien der beiden vorherigen Level und stellt das Optimum der Barrierefreiheit dar. Diese Kriterien sind allerdings auch aus Sicht der Autoren kaum vollständig zu erfüllen. Dazu zählt etwa, dass bei Liveübertragungen ein Gebärdendolmetscher übersetzt. Laut der aktuellen WebAIM-Studie sind 98 Prozent von einer Million getesteter Websites nicht barrierefrei, also nicht konform zu den Web Content Accessibility Guidelines auf Level AA.
Diese zweiteilige Serie bietet Empfehlungen für die barrierefreie Gestaltung von Webanwendungen am Beispiel der Website der fiktiven Versicherung "Crimson Assurance". Die zugehörigen Codebeispiele sollen die essenzielle Struktur einer barrierefreien Webanwendung zeigen und lassen sich nicht direkt übernehmen.
Aufbau der Crimson-Assurance-Website
Die Website von Crimson Assurance umfasst zwei Hauptbereiche: eine Kundenübersicht, die gleichzeitig die Startseite der Anwendung darstellt, und eine Nachrichtenverwaltung. Eine Nachrichtenvorschau ist auf jeder Webseite von Crimson Assurance über die Hauptnavigation abrufbar.
Die Hauptnavigation in der Kopfleiste jeder Webseite umfasst ein Hauptmenü und ein Benutzermenü. Das Hauptmenü zeigt zu Demonstrationszwecken lediglich die Kundenübersicht als einzigen Menüpunkt. Das Benutzermenü umfasst einen Link zu den persönlichen Nachrichten des aktuell angemeldeten Nutzers, die Vorschau der fünf letzten neuen Nachrichten von Kolleginnen und einen Nutzer-Avatar mit dem eigenen Nutzernamen. Ein Klick auf den Nutzernamen öffnet ein Menü, das einen Link zum Abmelden von der Anwendung enthält.
Jeder Hauptinhalt auf den Seiten der Anwendung beginnt mit einer Orientierungsnavigation in Form einer Breadcrumb-Navigation.
Die Kundenübersicht erlaubt die Suche nach Kundennamen. Die Ergebnisliste baut sich während der Suche dynamisch auf. Angemeldete Nutzerinnen können sich zudem ihre zuletzt kontaktierten Kunden anzeigen lassen – wahlweise begrenzt auf 5 oder 20 Einträge. Auch eine Übersicht sämtlicher jemals kontaktierter Kunden ist verfügbar.
Nach der Auswahl eines Kunden zeigt ein Kundendeckblatt neben dessen persönlichen Daten auch die mit ihm abgeschlossenen Verträge und ihm unterbreitete Angebote. Die Nachrichtenübersicht zeigt eingegangene und ausgegangene Nachrichten von und an Kollegen der angemeldeten Nutzerin.
Der Nachrichteneingang und der Nachrichtenausgang lassen sich nach Datum und gruppiert nach Status – gelesen oder ungelesen – sortieren. Auch eine Volltextsuche innerhalb aller Nachrichten und innerhalb gefilterter Nachrichten ist möglich. Die angezeigten Nachrichten erscheinen in Zehnerblöcken. Diese Paginierung kann über native HTML-Schaltflächen durchlaufen werden.
Die Auswahl einer Nachricht führt zu einer Detailseite mit den üblichen Angaben von Sender, Betreff und Inhalt. Die Nutzerin kann eine geöffnete Nachricht löschen, weiterleiten und als ungelesen kennzeichnen. Von dieser Detailseite aus kann man auch zur vorherigen oder zur nächsten Nachricht navigieren oder zur Nachrichtenübersicht zurückkehren.
Die Nachrichtenübersichtsseite erlaubt die Navigation auf eine Seite zum Verfassen einer neuen Nachricht. Für das Schreiben und Versenden einer Nachricht sind der Name des Empfängers, ein Betreff und der Inhalt der Nachricht anzugeben. Von dieser Seite aus kann man auch zurück zur Nachrichtenübersicht navigieren.
Das Beispiel ist bewusst schlank gehalten, um anhand weniger Seiten und Inhalte die Prinzipien barrierefreier Produktentwicklung zu zeigen und zu beschreiben. Die erläuterten Techniken und Prinzipien lassen sich auf beliebige andere Kontexte übertragen, inhaltlich analog auch auf Domänen außerhalb des Webs.
Sprachangabe per <html>-Tag
Für die korrekte Aussprache von Wörtern durch eine Sprachsynthese, wie sie auch häufig als Ausgabemedium von Screenreadern eingesetzt wird, müssen Entwicklerinnen und Entwickler zunächst die Sprache der gesamten Webseite per lang-Attribut im <html>-Tag angeben. Für die Verständlichkeit von Wörtern in einer anderen Sprache als derjenigen, in der der Inhalt der Webseite geschrieben ist, ist anschließend eine weitere Anpassung vorzunehmen.
Beispielsweise ist es schwierig, englische Begriffe mit einer auf Deutsch eingestellten Sprachsynthese und somit einer deutschen Aussprache zu verstehen. Einzelne englische Wörter im Inhaltsbereich einer Seite müssen Entwicklerinnen und Entwickler daher entsprechend per lang-Attribut auszeichnen. Ausgenommen sind eingedeutschte Wörter wie Computer und Keyboard.
Die Sprachangabe im lang-Attribut erfolgt durch die internationalen Sprachcodes, für Deutsch also beispielsweise de, für Englisch en. Ausdrucksweisen werden mit den jeweiligen internationalen Sprachcodes mit einem Bindestrich getrennt an die Basissprache angefügt, beispielsweise de-de für in Deutschland gesprochenes Deutsch, en-us für amerikanisches Englisch.
Eine korrekte Syntax ist:
<html lang="de-de">