Ein ARIA-Label gibt einem Bedienelement einen Namen, den assistive Technologie vorlesen kann. Du nutzt das Attribut aria-label="Suche", wenn ein Element keinen sichtbaren Text hat. Klassisches Beispiel: ein Button, der nur ein Lupen-Icon zeigt. Ohne Label sagt der Screenreader nur „Schaltfläche“ – nutzlos. Mit aria-label="Suche" wird daraus „Suche, Schaltfläche“. Das ARIA-Label liefert also den Accessible Name des Elements.
Wann du es brauchst – und wann nicht
Die erste Regel von WAI-ARIA lautet: Nutze ARIA nur, wenn natives HTML nicht reicht. Hat ein Button sichtbaren Text, braucht er kein aria-label.
- Icon-Buttons ohne Text: Schließen (X), Menü (Burger), Teilen.
- Mehrere gleich benannte Bereiche, etwa zwei
<nav>:aria-label="Hauptnavigation"undaria-label="Fußzeile"trennen sie. - Gibt es sichtbaren Beschriftungstext im DOM, verweise besser mit
aria-labelledbydarauf, statt den Namen doppelt zu pflegen.
Häufiger Fehler
Ein aria-label überschreibt den sichtbaren Text. Schreibst du auf einen Button „Senden“, setzt aber aria-label="Absenden", hören Screenreader-Nutzer etwas anderes, als sie sehen. Das verwirrt und bricht die Konsistenz. Achte außerdem darauf, dass der Label-Text in der richtigen Sprache steht. In WordPress-Page-Buildern fügen Icon-Elemente das aria-label oft nicht automatisch hinzu – das musst du manuell prüfen. Beachte: aria-label funktioniert nur bei interaktiven oder mit einer Rolle versehenen Elementen zuverlässig, nicht auf jedem beliebigen <span>.