Was sind ARIA-Attribute überhaupt?

ARIA steht für „Accessible Rich Internet Applications“ – klingt kompliziert, ist es aber nicht. ARIA-Attribute sind zusätzliche HTML-Eigenschaften, die Screen Readern erklären, was auf deiner Website passiert.

Denk an ARIA wie an Untertitel in einem Film: Sehende Menschen sehen die Bilder, aber Screen Reader-Nutzer brauchen diese „Untertitel“, um zu verstehen, was gerade abläuft.

Wichtige Grundregel:

Verwende zuerst semantisches HTML, dann erst ARIA. Ein <button> ist immer besser als ein <div role="button">. ARIA ist nur die Notlösung, wenn HTML nicht reicht.

Die wichtigsten ARIA-Attribute im Überblick

Es gibt über 50 verschiedene ARIA-Attribute, aber du brauchst nur etwa 10 davon für 90% aller Fälle. Hier sind die wichtigsten:

aria-label gibt Elementen einen unsichtbaren Namen. aria-hidden versteckt dekorative Elemente vor Screen Readern. aria-expanded zeigt an, ob etwas auf- oder zugeklappt ist. aria-describedby verknüpft Elemente mit Hilfstext.

Das war’s schon für den Anfang! Diese vier Attribute lösen bereits die meisten Barrierefreiheits-Probleme.

aria-label – der unsichtbare Helfer

aria-label ist dein bester Freund bei Icon-Buttons. Ohne Text weiß ein Screen Reader nicht, was ein Button macht.

<!-- Schlecht: Screen Reader sagt nur "Button" -->
<button><i class="icon-close"></i></button>

<!-- Gut: Screen Reader sagt "Dialog schließen, Button" -->
<button aria-label="Dialog schließen">
  <i class="icon-close"></i>
</button>

<!-- Noch besser: Verstecke das Icon vor Screen Readern -->
<button aria-label="Dialog schließen">
  <i class="icon-close" aria-hidden="true"></i>
</button>

Zweck: Zeigt wie aria-label funktioniert und warum aria-hidden wichtig ist

aria-hidden – Dekorative Elemente verstecken

aria-hidden="true" ist perfekt für Icons, Trennstriche und andere dekorative Elemente, die Screen Reader verwirren würden.

<!-- Verwirrender Screen Reader Output ohne aria-hidden -->
<button>
  <i class="fas fa-download"></i>
  Datei herunterladen
</button>
<!-- Screen Reader: "Bild Datei herunterladen Button" -->

<!-- Sauberer Output mit aria-hidden -->
<button>
  <i class="fas fa-download" aria-hidden="true"></i>
  Datei herunterladen
</button>
<!-- Screen Reader: "Datei herunterladen Button" -->

Zweck: Demonstriert den Unterschied im Screen Reader Output

aria-expanded – Auf- und Zuklappen kommunizieren

aria-expanded zeigt an, ob Dropdown-Menüs, Akkordeons oder mobile Navigation auf- oder zugeklappt sind.

<!-- Dropdown-Button mit aria-expanded -->
<button 
  aria-expanded="false" 
  aria-controls="user-menu"
  onclick="toggleMenu()">
  Benutzerkonto
  <i class="arrow-down" aria-hidden="true"></i>
</button>

<ul id="user-menu" style="display: none;">
  <li><a href="/profile">Profil</a></li>
  <li><a href="/settings">Einstellungen</a></li>
  <li><a href="/logout">Abmelden</a></li>
</ul>

<script>
function toggleMenu() {
  const button = event.target;
  const menu = document.getElementById('user-menu');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  // Status umschalten
  button.setAttribute('aria-expanded', !isExpanded);
  menu.style.display = isExpanded ? 'none' : 'block';
}
</script>

Zweck: Vollständiges Beispiel mit JavaScript für aria-expanded

aria-describedby – Hilfstext verknüpfen

aria-describedby verknüpft Formularfelder mit Hilfstext oder Fehlermeldungen.

<!-- Passwort-Feld mit Anforderungen -->
<label for="password">Neues Passwort</label>
<input 
  type="password" 
  id="password" 
  aria-describedby="password-help password-error"
  required>

<div id="password-help">
  Mindestens 8 Zeichen, davon eine Zahl und ein Sonderzeichen
</div>

<div id="password-error" style="color: red; display: none;">
  Passwort entspricht nicht den Anforderungen
</div>

Zweck: Zeigt wie Hilfstext und Fehlermeldungen verknüpft werden

Live Regions – Dynamische Änderungen mitteilen

aria-live teilt Screen Readern mit, wenn sich Inhalte ändern – ohne dass der Nutzer den Fokus verliert.

<!-- Status-Meldungen für Formulare -->
<div id="status" aria-live="polite"></div>

<!-- Fehlermeldungen (wichtiger) -->
<div id="alerts" aria-live="assertive"></div>

<script>
// Erfolg mitteilen
document.getElementById('status').textContent = 
  'Einstellungen gespeichert';

// Fehler sofort ankündigen
document.getElementById('alerts').textContent = 
  'Verbindung fehlgeschlagen - bitte erneut versuchen';
</script>

Zweck: Live Regions für dynamische Inhalte

Häufige Fehler und wie du sie vermeidest

Der größte Fehler: Zu viel ARIA verwenden. Jedes HTML-Element hat bereits eingebaute Semantik. Du machst es nur kaputt, wenn du unnötig ARIA hinzufügst.

<!-- FALSCH: Unnötige Wiederholung -->
<nav role="navigation">
<button role="button">Klick mich</button>
<a href="#" role="link">Link</a>

<!-- RICHTIG: HTML reicht völlig -->
<nav>
<button>Klick mich</button>
<a href="#">Link</a>

Häufige Fragen zu ARIA