WAI-ARIA – Einführung in barrierefreies Webdesign
Von: Jonas Mit WAI-ARIA können HTML-Dokumente über die Möglichkeiten von HTML hinaus semantisch ausgezeichnet werden. Das ist notwendig für barrierefreie Dokumente.
Guter HTML-Code zeichnet sich u.a. dadurch aus, dass er semantisch wertvoll aufgebaut ist. Wenn das der Fall ist, finden sich sehbehinderte Menschen und Suchmaschinen gut auf der Website zurecht. WAI-ARIA kommt auf Webseiten immer dann zum Einsatz, wenn die normale HTML-Semantik an ihre Grenzen stößt. In diesem Beitrag erfahrt ihr, wie mit der Zuweisung des role-Attributs eine semantische Erweiterung von HTML-Elementen geschaffen werden kann.
Einführung in WAI-ARIA
Die Web Accessibility Initiative (WAI) gehört zum World Wide Web Consortium (W3C) und befasst sich mit der Entwicklung von Richtlinien für barrierefreie Webseiten. ARIA steht für »Accessible Rich Internet Applications«. Damit sind Internetanwendungen gemeint, deren Benutzeroberfläche reich an interaktiven Elementen sind für die es kein passendes HTML-Element gibt (z. B. Drag and Drop, Kalender, Slider etc.).
Um diese Webapplikationen für Screenreader und Tastaturnutzer zugänglich (= accessible) zu machen, wird den Elementen mit der Zuweisung von Rollen (Landmark-Roles/Widget-Roles) eine zusätzliche Information mitgegeben. Ein <div>-Konstrukt, dass einen Slider erstellt, kann somit beispielsweise auch semantisch als Slider ausgezeichnet werden, obwohl es in HTML selbst kein semantisches Element für »Slider« gibt.
Landmark-Roles mit dem role-Attribut
Mithilfe des role-Attributs werden dem HTML-Element die fehlenden Informationen zugewiesen. Dabei ist darauf zu achten, dass HTML bereits über eigene semantische Elemente verfügt, die ihr bevorzugt verwenden solltet. Beispielsweise ist es nicht sinnvoll, eine Überschrift mit der Landmark-Role role="heading" auszuzeichnen, wenn stattdessen die semantischen Elemente <h1> bis <h6> verwendet werden können. Außerdem solltet ihr darauf achten, dass die bereits vorhandene Semantik eines Elements mit dem role-Attribut nicht überschrieben wird.
Die Zuweisung von role="heading" am Beispiel eines <div> sieht so aus:
<div role="heading">Überschrift</div>Besser ist es, Überschriften folgendermaßen auszuzeichnen:
<h1>Überschrift</h1>Die wichtigsten Landmark-Roles
Die folgenden Landmark-Roles werden am häufigsten eingesetzt. Die Liste ist ausdrücklich nicht vollständig.
role=“banner“
Kennzeichnet einen Bereich mit seitenübergreifenden Informationen (Logo, Slogan etc.) und sollte nur einmal verwendet werden.
role=“navigation“
Kennzeichnet wie das <nav>-Element einen Navigationsbereich.
role=“main“
Kennzeichnet wie das <main>-Element den Hauptinhaltsbereich einer Website.
role=“article“
Kennzeichnet wie das <article>-Element einen in sich abgeschlossenen inhaltlichen Bereich auf der Webseite.
role=“complementary“
Kennzeichnet den Hauptinhalt ergänzende Inhalte in der Sidebar. Vergleichbar mit dem <aside>-Element.
role=“note“
Kennzeichnet marginale Inhalte.
role=“contentinfo“
Kennzeichnet allgemeine Informationen zur Website wie Copyright, Fußnoten und Impressum, die i.d.R. im <footer> untergebracht werden und nur einmal verwendet werden sollten.
role=“search“
Kennzeichnet die Suche in einem Formular (<form role="search">).
Widget-Roles für Zustände
Bei interaktiven Komponenten werden zusätzlich zu den Rollen weitere Attribute hinzugefügt, die den Zustand des Elements kenntlich machen. Das ist beispielsweise bei einem Slider (role="slider") oder einem Fortschrittsbalken (role="progressbar") der Fall, wo mit ergänzenden Werten (aria-valuemin, aria-valuenow, aria-valuemax) der Fortschritt oder Stand des Schiebereglers gekennzeichnet wird.
Eine anderes Beispiel für die Anwendung von Widget-Roles ist eine Tri-State-Checkbox (Kontrollkästchen mit drei möglichen Zuständen »aktiviert«, »teilweise aktiviert« und »nicht aktiviert«). Mit role="checkbox" und den ergänzenden Attributen aria-checked="true", aria-checked="mixed", aria-checked="false" wird die Checkbox für Screenreader ansteuerbar.
