aria-label vs. aria-describedby

aria-label und aria-describedby sind beide ARIA-Attribute, erfüllen aber unterschiedliche Aufgaben: aria-label überschreibt oder ergänzt den „Accessible Name“ eines Elements, den Screenreader zuerst vorlesen, während aria-describedby eine zusätzliche „Accessible Description“ liefert, die erst danach als ergänzende Zusatzinformation angesagt wird. Beide ersetzen keine sichtbaren, gut lesbaren Texte, sondern schließen Lücken bei fehlender oder unklarer Beschriftung.

In der Praxis

Ein Icon-Button ohne sichtbaren Text bekommt sinnvollerweise ein aria-label wie „Suche schließen“, damit er überhaupt einen Namen hat. Ein Eingabefeld mit sichtbarem Label kann zusätzlich per aria-describedby auf eine Fehlermeldung oder einen Hinweistext verweisen, ohne das Label zu verändern. Wichtig: aria-labelledby hat Vorrang vor aria-label, wenn beide gesetzt sind, und Beschreibungen werden nicht in jedem Screenreader-Navigationsmodus automatisch vorgelesen – sie sollten Zusatzinfos liefern, keine Pflichtangaben ersetzen.

Passende Leistung

Quellen

← Zurück zum Glossar