Fehlende ARIA-Label-IDs
Silktide prüft Elemente, die ihren per ID aus anderen Elementen beziehen, und meldet Verweise auf IDs, die auf der Seite nicht existieren. Ein defekter Verweis lässt das Element ohne den Namen zurück, den es haben sollte.
Das -Attribut aria-labelledby benennt ein
Element, indem es auf die id des Elements zeigt, das seine Beschriftung enthält – eine
Überschrift, die einen Dialog benennt, oder eine Beschriftung, die ein Steuerelement benennt:
<!-- Problem: Der Verweis lautet "dialog-label", aber die id der Überschrift ist "dialog-labell" -->
<h2 id="dialog-labell">Wichtige Nachricht!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Warum das wichtig ist
Der zugängliche Name ist das, was ein
ansagt, wenn eine besuchende Person
auf ein Element trifft. Wenn ein aria-labelledby-Verweis ins Leere zeigt,
wird das Element möglicherweise ganz ohne Namen angesagt – ein unbenannter Dialog, eine
unbenannte Schaltfläche – und die besuchende Person muss seinen Zweck erraten. Diese Fehler sind
unsichtbar: Die Seite sieht identisch aus, und selbst sorgfältige Nutzertests entdecken selten einen Namen,
der stillschweigend nicht zugewiesen wurde. IDs werden umbenannt und Inhalte
umstrukturiert, sodass Verweise mit der Zeit veralten.
So behebst du das
- Finde das Element, das den Namen liefern sollte, und bring den Wert von
aria-labelledbyexakt mit dessenidzur Deckung (bei IDs wird zwischen Groß- und Kleinschreibung unterschieden):
<!-- Behoben: Der Verweis entspricht der id der Überschrift -->
<h2 id="dialog-label">Wichtige Nachricht!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Wenn das beschriftende Element entfernt wurde, stelle es wieder her oder wechsle zu einem
aria-label-Attribut, das den Namen als Text enthält. - Wenn ein Element von mehreren anderen benannt wird, liste jede ID durch Leerzeichen getrennt auf und prüfe jede einzelne.
So prüft Silktide dies
- Finde auf jeder Seite jedes Element mit einem
aria-labelledby-Attribut. - Teile den Attributwert in einzelne IDs auf.
- Melde jede referenzierte ID, die nirgendwo auf der Seite existiert.