# aria-label: Elemente richtig benennen

Source: https://allyway.ai/de/glossary/aria-label

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.

aria-label ist ein HTML-Attribut aus der ARIA-Spezifikation, das einem Element einen [zugänglichen Namen](https://allyway.ai/de/glossary/zugaenglicher-name) als reinen Text gibt. Ein Screenreader sagt ihn an, etwa „Dialog schließen, Schalter“ für ein „ד-Symbol. Es ist die schnellste Lösung für Bedienelemente ohne sichtbaren Text – und eines der am häufigsten falsch eingesetzten Attribute, wenn bereits sichtbarer Text vorhanden ist.

## Was es bedeutet

[WCAG 4.1.2 Name, Rolle, Wert](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) (Stufe A, [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2)) verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen. Als hinreichende Technik nennt das W3C ARIA14: aria-label, um einen zugänglichen Namen bereitzustellen, wo keine sichtbare Beschriftung möglich ist. Die Formulierung ist entscheidend: aria-label ist für Fälle gedacht, in denen eine sichtbare Beschriftung nicht geht.

Drei Dinge sollten Sie über das Attribut wissen:

| Tatsache | Folge |
|---|---|
| Es überschreibt den eigenen Text des Elements | `<a aria-label="Mehr lesen">Versandbedingungen</a>` wird als „Mehr lesen“ angesagt – der sichtbare Text zählt nicht |
| `aria-labelledby` hat Vorrang | Sind beide gesetzt, ist der verknüpfte Text der Name |
| Es ist unsichtbar | Sehende Menschen sehen es nie, Fehler fallen daher kaum auf |

Es wirkt bei interaktiven Elementen (Links, Buttons, Formularfelder), bei Landmarks wie `<nav>` und bei `role="img"`. Auf einem einfachen `div` oder `span` ohne Rolle erlaubt ARIA keine Benennung – viele Screenreader ignorieren das Label dort.

> **Tip:** > **Sichtbare Worte zuerst**
> Zeigt ein Bedienelement Text, sollte das aria-label genau mit diesen Worten beginnen („Suche in Produkten“ für einen Button mit der Aufschrift „Suche“). Das W3C-Kriterium 2.5.3 „Beschriftung im Namen“ verlangt, dass der Name den sichtbaren Text enthält, und empfiehlt, ihn an den Anfang zu stellen – damit Sprachsteuerungsnutzer sagen können, was sie sehen.

## Praxisbeispiele

```html title="Beispiel"
<!-- Gut: Button nur mit Symbol -->
<button aria-label="Dialog schließen">
  <svg aria-hidden="true">…</svg>
</button>

<!-- Gut: zwei Navigationen unterscheiden -->
<nav aria-label="Hauptmenü">…</nav>
<nav aria-label="Fußzeile">…</nav>

<!-- Schlecht: Label widerspricht dem sichtbaren Text -->
<a href="/versand" aria-label="Hier klicken">Versandbedingungen</a>
```

**Do:** Do

aria-label für [Icon-Buttons](https://allyway.ai/de/glossary/icon-button), Suchfelder ohne sichtbare Beschriftung und zur Unterscheidung mehrerer gleichartiger [ARIA-Landmarks](https://allyway.ai/de/glossary/aria-landmarks) verwenden. Die Aktion beschreiben („Menü öffnen“), nicht das Symbol („Hamburger“). Das Symbol selbst mit `aria-hidden="true"` ausblenden.

**Don't:** Don't

aria-label auf Elemente setzen, die bereits einen guten sichtbaren Text haben, es auf einem einfachen `div` oder `span` verwenden, es für die Suchmaschinenoptimierung mit Keywords füllen oder es anstelle eines echten `<label>` bei Formularfeldern einsetzen, die Platz für eine Beschriftung haben.

## So prüfen Sie aria-label



## Häufige Fragen

Q: Was ist der Unterschied zwischen aria-label und aria-labelledby?
A: aria-label enthält den Namen als Text im Attribut. aria-labelledby verweist auf die ID eines anderen Elements, dessen sichtbarer Text zum Namen wird. Nutzen Sie aria-labelledby, wenn der Text bereits auf der Seite steht.

Q: Ersetzt aria-label den sichtbaren Linktext?
A: Ja. Für assistive Technologien überschreibt aria-label den Inhalt des Elements. Deshalb verwirrt ein Label, das vom sichtbaren Text abweicht, Screenreader- und Sprachsteuerungsnutzer.

Q: Hilft aria-label bei der Suchmaschinenoptimierung?
A: Nein. aria-label ist für assistive Technologien gedacht. Versteckte Keywords machen die Seite schwerer bedienbar und haben dort nichts zu suchen.

Q: Kann ich aria-label auf einem div verwenden?
A: Nur, wenn das div eine Rolle hat, die einen Namen erlaubt, etwa `role="region"` oder `role="img"`. Auf einem allgemeinen div oder span ohne Rolle verbietet ARIA die Benennung, und viele Screenreader ignorieren sie.

Q: Wie finde ich Symbole ohne Namen auf meiner Website?
A: Der [kostenlose WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) prüft Ihre Startseite nach WCAG 2.2 AA – einschließlich Links und Buttons ohne zugänglichen Namen.