WAI-ARIA-Attribute

1. Grundlegende ARIA-Attribute

Die wichtigsten ARIA-Attribute sind role, aria-label, aria-labelledby, und aria-describedby. Diese Attribute beschreiben die Funktion oder den Status eines Elements, um es verständlicher zu machen.

  • role: Weist einem Element eine spezifische Rolle zu.

  • aria-label: Gibt einem Element einen beschreibenden Namen.

  • aria-labelledby: Verknüpft ein Element mit einem anderen, das es beschreiben soll.

  • aria-describedby: Verweist auf ein Element, das zusätzliche Informationen liefert.

Beispiel:

<button role="button" aria-label="Formular absenden">Absenden</button>

2. role-Attribut

Mit dem role-Attribut können HTML-Elementen spezielle Rollen zugewiesen werden. Es ist besonders nützlich, wenn man keine semantischen HTML-Tags verwenden kann.

Rolle
Beschreibung

button

Definiert ein Element als Schaltfläche

alert

Für Warnungen oder Fehler, wird sofort vorgelesen

navigation

Definiert eine Navigationsleiste

main

Der Hauptinhalt der Seite

banner

Definiert einen Seitenkopfbereich

dialog

Ein Dialogfeld wie ein Popup

Beispiel für eine benutzerdefinierte Schaltfläche:

<div role="button" tabindex="0" onclick="submitForm()">Absenden</div>

Hinweis: Bei Verwendung von role="button" auf einem <div> sollte das tabindex="0" hinzugefügt werden, damit die Schaltfläche mit der Tab-Taste erreicht werden kann.

3. aria-label

Das aria-label-Attribut wird verwendet, um einem Element einen beschreibenden Namen zu geben, insbesondere wenn kein visueller Text vorhanden ist.

Beispiel für eine Navigation mit Icons:

<nav>
  <a href="#home" aria-label="Zur Startseite"><i class="icon-home"></i></a>
  <a href="#search" aria-label="Suche öffnen"><i class="icon-search"></i></a>
</nav>

4. aria-labelledby

Das aria-labelledby-Attribut verknüpft ein Element mit einem anderen, das eine beschreibende Überschrift enthält. Es ist besonders hilfreich für Formularelemente.

Beispiel:

<label id="email-label">E-Mail-Adresse:</label>
<input type="email" id="email" aria-labelledby="email-label">

Hier verweist das Eingabefeld (input) auf das Label, und der Screenreader liest beim Fokusieren „E-Mail-Adresse“ vor.

5. aria-describedby

Mit aria-describedby wird eine zusätzliche Beschreibung für ein Element angegeben. Dies ist besonders hilfreich für Formulare mit erklärenden Texten oder Anweisungen.

Beispiel:

<label for="username">Nutzername:</label>
<input type="text" id="username" aria-describedby="username-help">
<span id="username-help">Der Nutzername muss mindestens 8 Zeichen enthalten.</span>

Wenn sich der Nutzer auf das Eingabefeld fokussiert, liest der Screenreader den Hinweis „Der Nutzername muss mindestens 8 Zeichen enthalten.“

6. Arbeiten mit aria-hidden

aria-hidden="true" versteckt ein Element vor Screenreadern, selbst wenn es visuell angezeigt wird. Es ist nützlich, wenn bestimmte Inhalte nicht vorgelesen werden sollen.

Beispiel für ein dekoratives Bild:

<img src="design-element.png" alt="" aria-hidden="true">

Da das Bild rein dekorativ ist, sollte es nicht für Screenreader zugänglich sein.

7. Zustandsangaben mit ARIA-Attributen

Es gibt verschiedene aria-*-Attribute, die den Status von Elementen beschreiben. Diese Statusattribute helfen Screenreader-Nutzern, die aktuelle Situation oder den Status eines Elements zu verstehen.

ARIA-Attribut
Bedeutung

aria-expanded

Gibt an, ob ein Element (z. B. ein Menü) geöffnet ist

aria-checked

Zeigt den Status einer Checkbox an

aria-selected

Markiert ein ausgewähltes Element

aria-disabled

Zeigt an, dass ein Element deaktiviert ist

Beispiel für ein aufklappbares Menü:

<button aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">Menü</button>
<ul id="menu" style="display: none;">
  <li><a href="#home">Startseite</a></li>
  <li><a href="#services">Dienstleistungen</a></li>
  <li><a href="#contact">Kontakt</a></li>
</ul>

<script>
function toggleMenu() {
  const menu = document.getElementById("menu");
  const isExpanded = menu.style.display === "block";
  menu.style.display = isExpanded ? "none" : "block";
  document.querySelector("button[aria-controls='menu']").setAttribute("aria-expanded", !isExpanded);
}
</script>

Der Screenreader erkennt nun, ob das Menü geöffnet (aria-expanded="true") oder geschlossen (aria-expanded="false") ist.

8. Dynamische Inhalte und aria-live

Wenn Inhalte dynamisch aktualisiert werden (z. B. bei Benachrichtigungen oder Ladezuständen), können aria-live-Regionen verwendet werden, damit Screenreader automatisch diese Änderungen vorlesen.

Wert
Bedeutung

aria-live="polite"

Updates werden vorgelesen, wenn der Nutzer pausiert

aria-live="assertive"

Updates werden sofort vorgelesen

Beispiel für eine Ladeanzeige:

<div aria-live="polite" id="status">Bitte warten, die Daten werden geladen...</div>

Sobald sich der Text innerhalb des status-Divs ändert, informiert der Screenreader den Nutzer darüber.

9. aria-controls, aria-owns, und aria-flowto

Diese Attribute werden genutzt, um eine Verbindung oder Reihenfolge zwischen Elementen herzustellen.

  • aria-controls: Zeigt, dass ein Element ein anderes steuert.

  • aria-owns: Definiert die visuelle Hierarchie, z. B. bei verschachtelten Elementen.

  • aria-flowto: Bestimmt die Lesereihenfolge für Screenreader.

Beispiel mit aria-controls:

<button aria-controls="details" onclick="toggleDetails()">Details anzeigen</button>
<div id="details" hidden>
  <p>Hier sind die Details zum Produkt...</p>
</div>

Zusammenfassung

Mit ARIA-Attributen kannst du die Zugänglichkeit deiner Webseite signifikant verbessern. Hier sind die wichtigsten Punkte noch einmal zusammengefasst:

  1. Beschreibende Labels: Verwende aria-label, aria-labelledby, und aria-describedby, um Elemente zu beschreiben.

  2. Zustandsverwaltung: Nutze aria-expanded, aria-selected, aria-checked, um den Zustand von Elementen zu definieren.

  3. Verbindung und Kontrolle: Setze aria-controls, aria-owns, und aria-flowto, um die Reihenfolge und Struktur zu verdeutlichen.

  4. Live-Updates: Mit aria-live kannst du dynamische Inhalte für Screenreader aktualisieren.

Mit diesen Grundlagen hast du eine solide Basis, um ARIA-Attribute sinnvoll in deiner WordPress-Seite einzusetzen.

VorherigeTechnische DetailsNächsteLinks per Tastatur erreichen

Zuletzt aktualisiert