WAI-ARIA-Rollen: Bedeutung und Nutzen für barrierefreie Webanwendungen

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) Roles sind eine Sammlung von Rollen und Eigenschaften, die es Entwicklern ermöglichen, barrierefreie Webanwendungen zu erstellen.

WAI-ARIA-Rollen ermöglichen es, die Semantik von Elementen zu erweitern, so dass Assistenztechnologien wie Screenreader besser verstehen, wie sie mit den Inhalten interagieren sollen. Die Rollen geben auch Hinweise auf die Bedeutung und Funktion der Elemente auf der Seite, was es Benutzern erleichtert, Inhalte schneller zu verstehen und zu navigieren.

WAI-ARIA-Rollen werden eingesetzt, wenn HTML-Elemente allein nicht ausreichen, um die Semantik einer Webseite vollständig zu beschreiben. Beispielsweise können sie genutzt werden, um spezielle Widgets wie Dropdown-Menüs oder Accordion-Elemente zu beschreiben, die nicht durch herkömmliche HTML-Elemente dargestellt werden können.

Insgesamt können WAI-ARIA-Rollen dabei helfen, Webseiten und Webanwendungen barrierefreier und zugänglicher zu gestalten, insbesondere für Menschen mit Behinderungen, die auf Assistenztechnologien angewiesen sind.

WAI-ARIA roles im Einsatz

Beispiel Dropdown-Menü

Ein Dropdown-Menü: Wenn Du ein Dropdown-Menü erstellen möchtest, das von einem Screenreader richtig erkannt und ausgelesen wird, musst Du die Rolle "combobox" und die Attribute "aria-expanded" und "aria-controls" verwenden. Diese Rollen und Attribute helfen dem Screenreader zu verstehen, dass es sich um ein Dropdown-Menü handelt, und welche Optionen zur Verfügung stehen.

<label for="dropdown">Dropdown-Menü</label>
<select id="dropdown" aria-expanded="false" aria-controls="dropdown-options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<div id="dropdown-options">
  <ul role="listbox">
    <li role="option" tabindex="0">Option 1</li>
    <li role="option" tabindex="0">Option 2</li>
    <li role="option" tabindex="0">Option 3</li>
  </ul>
</div>

In diesem Beispiel wird die "combobox"-Rolle nicht verwendet, da das select-Element bereits als Dropdown-Menü interpretiert wird. Allerdings werden die Attribute aria-expanded und aria-controls verwendet, um dem Screenreader mitzuteilen, dass das Dropdown-Menü aktuell nicht geöffnet ist und welche Optionen zur Verfügung stehen, wenn es geöffnet wird. Die Optionen werden mit einer ul-Liste erstellt, bei der jedes li-Element die option-Rolle und einen tabindex von 0 besitzt, damit der Benutzer durch die Optionen navigieren kann.

Beispiel Akkordeon-Element

Ein Akkordeon-Element: Wenn Du ein Akkordeon-Element erstellen möchtest, bei dem sich der Inhalt ausklappt, wenn der Benutzer darauf klickt, solltest Du die Rolle region und die Attribute aria-expanded und aria-hidden verwenden. Diese Rollen und Attribute helfen dabei, dass Screenreader den Inhalt korrekt interpretieren können und den Benutzer darüber informieren, ob das Element ausgeklappt oder zugeklappt ist.

<button aria-controls="accordion-content" aria-expanded="false">
  Klick mich, um den Inhalt anzuzeigen
</button>
<div id="accordion-content" role="region" aria-expanded="false" aria-hidden="true">
  Hier ist der ausgeklappte Inhalt
</div> 

In diesem Beispiel wird ein button-Element verwendet, um das Akkordeon-Element zu steuern. Die Attribute "aria-controls" und "aria-expanded" werden verwendet, um dem Screenreader mitzuteilen, welche Elemente miteinander verbunden sind und ob das Akkordeon-Element aktuell ausgeklappt oder zugeklappt ist. Das div-Element für den Inhalt des Akkordeons erhält die "region"-Rolle und die Attribute "aria-expanded" und "aria-hidden", um dem Screenreader zu helfen, den Inhalt richtig zu interpretieren.

Beispiel Such-Funktion

Eine Suche-Funktion: Wenn Du eine Suche-Funktion auf Deiner Webseite einfügst, solltest Du die Rolle "search" und das Attribut "aria-label" verwenden. Diese Rollen und Attribute helfen dabei, dass Screenreader die Suchfunktion als solche erkennen und verstehen, was der Zweck der Suche ist.

<form role="search">
  <label for="search-input">Suche:</label>
  <input type="text" id="search-input" name="search" aria-label="Suche nach">
  <button type="submit">Suchen</button>
</form>

In diesem Beispiel wird die "search"-Rolle für das form-Element verwendet, um dem Screenreader mitzuteilen, dass es sich um eine Suche-Funktion handelt. Das input-Element erhält das Attribut "aria-label", um dem Screenreader zu sagen, wonach gesucht wird.