WAI-ARIA: Rollen für dummes HTML
Asche über mein Haupt; seit heute gibt mein WordPress-Template noch einige Warnungen zusätzlich aus! Und das hat ausnahmsweise einen guten Grund: Ich habe meine HTML-Struktur mit ein paar Zusatzattributen zu mehr Semantik verholfen, indem ich verschiedenen Elementen Rollen zugewiesen habe. Doch für was sind diese Rollen, wem dienen sie und wie werden sie angewendet?
Wie beim Film
Im Grunde läuft das mit den Rollen wie bei Film und Theater: Die Akteure unseres Stücks sind die HTML-Elemente unserer Website. Jedes dieser Elemente spielt dabei eine bestimmte Rolle. Die einen Elemente haben ganz einfache Rollen; sie sind Titel (h1, h2, h3), Listen (ul, ol, dl) oder Bilder (img) und somit auf der Bühne einfach und für jedermann zu identifizieren. Auch für Suchmaschinen und für Benutzer von assistiver Technologie (z.B. Blinde Menschen mit Screenreadern).
Doch es gibt auch komplexere Rollen, die mit den bekannten HTML 4- oder XHTML 1.x-Elementen nur unzureichend oder gar nicht beschreiben werden können. Solche unzureichend beschriebenen Rollen gibt es in einfacher Form auf jeder Website. Besonders häufig aber finden wir solche Rollen in neueren, komplexen Web-Anwendungen, sogenannten Rich Internet Applications (RIA). Diese kommen auf vielen aktuellen Websites zum Einsatz und bringen Desktop-User-Experience in unseren Webbrowser. Das können beispielsweise Fortschrittsanzeigen beim Upload eines Bildes bei Facebook oder beim Laden der neuen E-Mails bei Gmail sein.
Mit CSS und JavaScript alles zurechtgebogen
Für solche komplexen Elemente gibt es im überschaubaren Sprachschatz von HTML oder XHTML schlicht keine Rollen, welche diese Elemente und ihre Funktion ausreichend oder gar treffend beschreiben. Abhilfe könnte hier zumindest teilweise HTML 5 schaffen. Das grundsätzliche Problem aber bleibt auch dort: Wir haben vielleicht 50 verschiedene Akteure auf unserer Website, aber nur 20 davon haben eine treffende Rolle in Form eines passenden, semantisch korrekten HTML-Elementes bekommen. Da wir HTML visuell über CSS aber beliebig anpassen und über JavaScript auch das Verhalten dieser Elemente beeinflussen können, ist es uns trotzdem gelungen, viele neue Kostüme für die Akteure unseres Stücks zu schaffen, die in HTML so gar nicht angedacht waren: Fortschrittsanzeigen, Slider, Formular-Validatoren, Live-Regionen (Elemente die per AJAX neuen Content beziehen) und vieles mehr. Mit diesen Bedienelementen profitiert der «normale» User von einem im Internet nie dagewesenen Bedienkomfort.
Doch dieser Komfort hat auch eine Kehrseite: Da viele HTML-Elemente ihre neuen und komplexen Rollen nur durch ihr Kostüm, also rein visuell erhalten haben, bedeutet das nicht, dass die Akteure nun auch für alle eindeutig erkennbar sind. Semantisch haben wir nach wie vor eine Bühne voll von Nebendarstellern (div, span usw.), die zwar lustige Kostüme tragen, aber für nicht-visuell surfende User (Suchmaschinen, Screenreader-Benutzer), nicht ihrer Rolle entsprechend erkannt werden können.
Mit ARIA neue Rollen schaffen
Diese Lücke sollen nun ARIA-Rollen füllen. ARIA steht für «Accessible Rich Internet Applications». ARIA soll also auch komplexe Internetanwendungen für alle zugänglich machen. Die ARIA-Spezifikation ist momentan erst ein Arbeitsentwurf der WAI, dürfe aber in naher Zukunft als offizieller Standard des W3C verabschiedet werden. Zentraler Bestandteil von ARIA sind die Rollen.
Diese Rollen dienen dazu, die Bedeutung oder Funktion eines bestehendes HTML-Elementes durch zusätzliche Attribute auch für nicht-visuelle Benutzergruppen erfassbar zu machen und diesen zu sagen, wie sie damit umgehen sollen. So kann zum Beispiel eine Fortschrittsanzeige, die vielfach mit neutralen und somit nichtssagenden HTML-Elementen wie div erstellt wird, durch die Rolle progressbar in ein semantisch bedeutsames Element verwandelt werden. Die Rolle alleine ist bei einem komplexen Element wie einer Fortschrittsanzeige natürlich nicht genügend. Elemente können wo nötig mit zusätzlichen Zuständen und Eigenschaften versehen werden. Beim Beispiel der Fortschrittsanzeige könnte so der aktuelle Stand des Fortschritts über aria-valuenow ausgegeben werden.
Es gibt aber auch Rollen, die keine zusätzlichen Informationen ausgeben müssen und die somit entsprechend einfach zu implementieren sind: Die Landmarks. Dies sind Navigations-Marksteine, die Benutzern assistiver Technologie das schnelle Navigieren und die Orientierung in den verschiedenen Regionen der Seite ermöglichen. Klassiche Regionen der meisten Websites sind zum Beispiel der Kopfbereich mit Logo (Rolle: banner), die Navigation (Rolle: navigation), der Inhalt (Rolle: main) oder der Fussbereich mit Impressum und Disclaimer (Rolle: contentinfo). Diese ARIA-Landmarks sind neu auch Bestandteil dieses Blog.
Wie es geht
Diese Rollenzuweisung ist im Falle der Landmarks sehr einfach und geschieht über das in ARIA vorgesehene Rollen-Attribut, dass die wichtigsten Sektionen eines HTML-Konstrukts mit sogenannten Navigation-Landmarks anreichert. So wird zum Beispiel jeder Blog-Post mit der Rolle article versehen, was bedeutet, dass dies ein Inhaltselement ist, das eigenständig Sinn ergibt. Dies geschieht über das Zusatzattribut role folgendermassen:
Hier kommt der Artikel-Inhalt.
Die Rollen-Struktur dieses Blogs sieht nun folglich so aus:
Wer profitiert von ARIA?
ARIA ist vor allem für User von Screenreadern ein wichtiges Hilfsmittel, RIA’s überhaupt verwenden zu können, ermöglicht die einfachere Orientierung aber auch in statischen Websites. Um von den Neuerungen profitieren zu können, ist allerdings relativ neue Software erforderlich. Neben einem aktuellen User Agent, der ARIA versteht (z.B. Firefox ab 3, Internet Explorer ab 8), muss auch die assistive Software dafür ausgelegt sein. So unterstützt beispielsweise der beliebte Screenreader JAWS in der aktuellen Version 10 ARIA Live Region und ARIA Landmarks.
Nachteile?
Nachteile ergeben sich aus der Verwendung von ARIA keine. Einzig das durch die noch nicht offiziellen neuen Rollen-Attribute nicht mehr valide HTML-Konstrukt mag den Puristen stören. In der Bedienung ergeben sich dadurch aber keine Nachteile. Kann eine Software noch nicht mit ARIA umgehen, werden die neuen Attribute einfach ignoriert. Weitere Gründe Wai-Aria Landmarks sofort einzusetzen, liefert «Vorsprung durch Webstandards».