Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: HTML5 und CSS3 – Fortgeschrittene Techniken

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

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: