Zugänglicher Name: Was er ist und woher er kommt
Also called: Accessible Name, Barrierefreier Name, Berechneter Name
Definition
Der zugängliche Name ist der Text, den der Browser an assistive Technologien weitergibt, um ein Element zu benennen – etwa die Worte, die ein Screenreader für einen Button, Link oder ein Formularfeld ansagt. WCAG 4.1.2 verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen.
Ein zugänglicher Name (englisch „Accessible Name“) ist der Text, mit dem ein Browser einen Link, Button, ein Formularfeld oder ein anderes Bedienelement an assistive Technologien meldet. Ein Screenreader liest ihn vor („Suche, Schalter“), Sprachsteuerungen gleichen gesprochene Befehle damit ab. Fehlt er, wird nur die Rolle angesagt – und die Person muss raten, was das Element tut.
Was es bedeutet
Das Erfolgskriterium WCAG 4.1.2 Name, Rolle, Wert gehört zur Stufe A der WCAG 2.2. Es verlangt, dass Name und Rolle jeder Komponente der Benutzeroberfläche – Formularelemente, Links und per Skript erzeugte Komponenten – programmatisch ermittelbar sind. Das W3C weist darauf hin, dass der Name verborgen sein darf; ist er sichtbar, spricht man von einer Beschriftung (Label). Ein Bedienelement ohne programmatisch ermittelten Namen führt das W3C als Fehler F68.
Der Browser berechnet den barrierefreien Namen aus mehreren Quellen und nimmt die erste, die vorhanden ist. Vereinfacht gilt diese Reihenfolge:
| Priorität | Quelle | Beispiel |
|---|---|---|
| 1 | aria-labelledby (Text des verknüpften Elements) |
<button aria-labelledby="t1"> |
| 2 | aria-label |
<button aria-label="Schließen"> |
| 3 | HTML-eigene Beschriftung | <label for>, alt bei Bildern, <caption>, <legend> |
| 4 | Textinhalt (Links, Buttons, Überschriften) | <a href="/warenkorb">Warenkorb</a> |
| 5 | title oder placeholder als letzte Möglichkeit |
<input title="Suche"> |
Deshalb kann ein Element sichtbaren Text tragen und trotzdem anders heißen: Ein aria-label überschreibt den sichtbaren Text. Prüftools melden einen fehlenden Namen als leeren Button, leeren Link, fehlendes Formular-Label oder „Bild ohne Alternativtext“.
Praxisbeispiele
<!-- Kein zugänglicher Name: angesagt wird nur „Schalter“ -->
<button><svg aria-hidden="true">…</svg></button>
<!-- Name aus aria-label -->
<button aria-label="Menü öffnen"><svg aria-hidden="true">…</svg></button>
<!-- Name aus einem label-Element -->
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email">
<!-- Name aus dem Alternativtext des einzigen Bildes im Link -->
<a href="/"><img src="logo.svg" alt="allyWay Startseite"></a>Jedem Bedienelement einen kurzen, eindeutigen Namen geben, der den Zweck beschreibt: „Suche“, „In den Warenkorb“, „Nächstes Bild“. Wo möglich sichtbaren Text oder ein <label> verwenden und den Namen mit den sichtbaren Worten beginnen lassen.
Sich allein auf title oder placeholder verlassen, jedes Symbol „Button“ oder „Icon“ nennen oder ein aria-label setzen, das dem sichtbaren Text widerspricht („Absenden“ auf einem Button mit der Aufschrift „Senden“).
So prüfen Sie den zugänglichen Namen
Häufige Fragen
Was ist ein zugänglicher Name – und was ein Label?
Ein Label ist sichtbarer Text, etwa ein <label> neben einem Feld. Der zugängliche Name ist das, was assistive Technologien erhalten – oft aus dem Label übernommen, aber er kann auch aus aria-label, Alternativtext oder dem Inhalt des Elements stammen.
Woher bekommt ein Button seinen zugänglichen Namen?
Meist aus seinem Textinhalt. Enthält der Button nur ein Symbol, verwenden Sie aria-label oder aria-labelledby oder einen Alternativtext für das enthaltene Bild. Das title-Attribut ist nur eine Notlösung.
Kann ein zugänglicher Name zu lang sein?
Die WCAG nennen keine Höchstlänge, aber lange Namen bremsen Screenreader-Nutzer aus. Beschränken Sie den Namen auf den Zweck in wenigen Worten und legen Sie Zusatzinformationen in eine Beschreibung.
Wie finde ich Elemente ohne zugänglichen Namen?
Prüfen Sie Ihre Startseite mit dem kostenlosen WCAG-Scanner – er meldet Links, Buttons und Felder ohne Namen.
Kann allyWay fehlende zugängliche Namen automatisch beheben?
Ja. allyWay gibt namenlosen Links und Buttons klare Namen, die Screenreader vorlesen können, und ergänzt fehlende Beschriftungen bei Formularfeldern – von der KI aus Ihren Seiteninhalten geschrieben. Die automatischen Korrekturen setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. Kostenlos starten und sehen, welche Elemente allyWay auf Ihrer Website benennt.
Related terms
Leerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und behebenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenFehlendes Formular-Label: Fehler erklärt und behoben
Ein fehlendes Formular-Label bedeutet, dass ein Eingabefeld, eine Checkbox, eine Auswahlliste oder ein Textbereich keine verknüpfte Beschriftung und keinen anderen zugänglichen Namen hat. Screenreader sagen nur den Feldtyp an.
Read definition: Fehlendes Formular-Label: Fehler erklärt und behobenaria-label: Elemente richtig benennen
aria-label ist ein ARIA-Attribut, das den zugänglichen Namen eines Elements als Text festlegt. Screenreader sagen diesen Namen statt des Elementinhalts an – deshalb wird es vor allem für Bedienelemente ohne sichtbaren Text verwendet, etwa Icon-Buttons.
Read definition: aria-label: Elemente richtig benennen