Der Accessible Name ist der berechnete Name, mit dem ein Element wie ein Button, Link oder Eingabefeld bei assistiven Technologien angekündigt wird. Screenreader lesen ihn vor: „Senden, Schaltfläche“ oder „Startseite, Link“. Ohne aussagekräftigen Accessible Name bleibt unklar, was ein Element tut. Das betrifft direkt das WCAG-Erfolgskriterium 4.1.2 Name, Rolle, Wert (Stufe A).
Wie der Name entsteht
Der Browser berechnet den Accessible Name nach der Spezifikation „Accessible Name and Description Computation“ in einer festen Reihenfolge. Vereinfacht gilt: Ein aria-labelledby hat Vorrang, danach ein aria-label, danach das verknüpfte <label> oder der sichtbare Textinhalt, zuletzt ein title. Bei Bildern dient der Alternativtext als Name.
Worauf du achten solltest
- Sichtbarer Text und Accessible Name sollten übereinstimmen (SC 2.5.3 Beschriftung im Namen).
- Icon-Buttons brauchen ein aria-label oder verstecktes Text-Label.
- Nicht mehrere Namensquellen widersprüchlich kombinieren.
- Leere oder generische Namen wie „Link“ vermeiden.
Der Accessible Name baut auf Formular-Labels, Alternativtexten und WAI-ARIA auf. Er ist die Grundlage dafür, dass Screenreader Elemente sinnvoll ansagen, und gehört zum POUR-Prinzip der Robustheit.
In WordPress mit Bricks Builder solltest du bei reinen Icon-Buttons immer ein aria-label setzen, da sonst gar kein Accessible Name entsteht. Im Zweifel hilft ein Screenreader-Test.