kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Einführung in barrierearmes Webdesign mit WAI-ARIA

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.