# Zugänglicher Name: Was er ist und woher er kommt

Source: https://allyway.ai/de/glossary/zugaenglicher-name

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) gehört zur Stufe A der [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/glossary/aria-label) überschreibt den sichtbaren Text. Prüftools melden einen fehlenden Namen als [leeren Button](https://allyway.ai/de/glossary/leerer-button), [leeren Link](https://allyway.ai/de/glossary/leerer-link), [fehlendes Formular-Label](https://allyway.ai/de/glossary/fehlendes-formular-label) oder „Bild ohne Alternativtext“.

> **Note:** > **Sichtbare Beschriftung zuerst**
> Der W3C-Fehler F111 beschreibt ein Bedienelement mit sichtbarer Beschriftung, aber ohne zugänglichen Namen. Und nach 2.5.3 „Beschriftung im Namen“ sollen die sichtbaren Worte im Namen enthalten sein, damit Sprachsteuerungsnutzer sagen können, was sie sehen.

## Praxisbeispiele

```html title="Beispiel"
<!-- 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>
```

**Do:** Do

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.

**Don't:** Don't

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

Q: Was ist ein zugänglicher Name – und was ein Label?
A: 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.

Q: Woher bekommt ein Button seinen zugänglichen Namen?
A: 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.

Q: Kann ein zugänglicher Name zu lang sein?
A: 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.

Q: Wie finde ich Elemente ohne zugänglichen Namen?
A: Prüfen Sie Ihre Startseite mit dem [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) – er meldet Links, Buttons und Felder ohne Namen.

Q: Kann allyWay fehlende zugängliche Namen automatisch beheben?
A: 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](https://allyway.ai/de/automatic-accessibility-fixes-for-website) setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. [Kostenlos starten](https://app.allyway.ai/register) und sehen, welche Elemente allyWay auf Ihrer Website benennt.