aria-label
Das Attribut aria-label überschreibt den zugänglichen Namen eines Elements für assistive Technologien mit einem beliebigen Text, der nirgends sichtbar im Dokument steht.
Kurz erklärt
Jedes interaktive Element hat einen “zugänglichen Namen” (accessible name), den ein Screenreader beim Fokussieren vorliest - normalerweise abgeleitet aus dem sichtbaren Text (bei einem Button) oder einem verknüpften <label> (bei einem Formularfeld). aria-label="…" überschreibt diesen automatisch ermittelten Namen mit einem eigenen Text, der nirgends im sichtbaren Dokument erscheint. Das ist sinnvoll, wenn ein Element keinen aussagekräftigen sichtbaren Text tragen kann - etwa ein reiner Icon-Button ohne Beschriftung -, aber problematisch, sobald es einen bereits vorhandenen sichtbaren Text stillschweigend ersetzt.
Beispiel
<button aria-label="Suche schließen">
<svg aria-hidden="true"><!-- X-Icon --></svg>
</button>Der Button zeigt visuell nur ein X-Icon, bekommt aber über aria-label einen sprechenden Namen, den ein Screenreader vorliest - während aria-hidden="true" verhindert, dass das dekorative Icon selbst zusätzlich (und wirkungslos) angekündigt wird.
Warum ist das relevant?
Icon-only-Buttons - Suche, Menü, Warenkorb, Schließen-Kreuz - kommen in praktisch jedem modernen Interface vor und wären ohne aria-label für Screenreader-Nutzer namenlose, nicht identifizierbare Bedienelemente. Gleichzeitig ist aria-label eines der am leichtesten falsch eingesetzten ARIA-Attribute, weil es sich beliebig auf jedes Element setzen lässt, ohne dass ein sichtbarer Fehler entsteht - der Fehler zeigt sich erst beim Screenreader-Test.
Häufige Missverständnisse
aria-label an einem Element mit bereits vorhandenem, sichtbarem Text zu setzen überschreibt diesen Text für assistive Technologien vollständig - ein Link mit sichtbarem Text “Mehr erfahren” und aria-label="Zum WCAG-Artikel" wird von einem Screenreader nur noch mit dem aria-label-Text angekündigt, was sehende und blinde Nutzer faktisch unterschiedliche Namen für dasselbe Element hören und lesen lässt - das widerspricht dem WCAG-Kriterium “Label in Name”. Ein weiterer verbreiteter Fehler ist die Annahme, aria-label funktioniere auf jedem HTML-Element gleich zuverlässig: Bei nicht-interaktiven, nicht fokussierbaren Elementen ohne passende ARIA-Rolle wird es von vielen Screenreadern schlicht ignoriert.
Weiterführende Inhalte
Aus der Praxis
Ein per aria-label vergebener Name lässt sich nicht per Browser-Übersetzung, Sprachsteuerung oder Nutzer-CSS anpassen, da er nicht im sichtbaren Textfluss steht - für Elemente, die ohnehin sichtbaren Text tragen könnten, ist ein echtes sichtbares Label deshalb fast immer robuster.