Kostenloser ScanGratis-Scan

Glossar · Technik & Code

Zugänglicher Name (Accessible Name)

Von Veröffentlicht

Definition: Der zugängliche Name (englisch accessible name) ist die Bezeichnung, unter der ein Element im Accessibility Tree steht – bei einem Warenkorb-Button zum Beispiel „Warenkorb“. Screenreader sagen ihn an, Sprachsteuerung reagiert auf ihn. Der Browser berechnet ihn nach festen Regeln aus Textinhalt, Beschriftung, alt oder ARIA-Attributen [1][2].

Englisch: Accessible name · Zuletzt geprüft: 27. September 2026

Woher der Name kommt

Der Browser prüft die möglichen Quellen in einer festen Reihenfolge und nimmt die erste, die etwas liefert [1][2]:

  1. aria-labelledby – der Text eines anderen Elements, auf das verwiesen wird,
  2. aria-label – ein Text direkt im Attribut,
  3. die native Beschriftung – <label> bei Formularfeldern, alt bei Bildern, <legend> bei Fieldsets, <caption> bei Tabellen,
  4. der Textinhalt – bei Links, Buttons und Überschriften, einschließlich der Alternativtexte darin,
  5. als Notlösung title oder bei Eingabefeldern placeholder.

Daraus folgt: Ein aria-label überschreibt den sichtbaren Text. Das ist selten gewollt [5].

Wer ihn braucht

Ein Screenreader sagt bei jedem Bedienelement Name und Rolle an: „Warenkorb, Schaltfläche“. Fehlt der Name, hört man nur „Schaltfläche“ und muss raten. WCAG 4.1.2 Name, Rolle, Wert verlangt deshalb für jedes Bedienelement einen Namen [3].

Auch Sprachsteuerung arbeitet mit dem Namen. Wer „Klick auf Senden“ sagt, trifft nur, wenn „Senden“ im zugänglichen Namen steht. Das verlangt WCAG 2.5.3 Beschriftung im Namen: Der sichtbare Text muss im Namen enthalten sein [4].

Im Code

<!-- Kein Name: angesagt wird „Schaltfläche“ -->
<button>
  <svg aria-hidden="true">…</svg>
</button>
<!-- Name für den Icon-Button -->
<button aria-label="Menü öffnen">
  <svg aria-hidden="true">…</svg>
</button>
<!-- Noch besser: sichtbarer Text -->
<button>Suchen</button>

Häufige Fehler

  • Icon-Buttons und Icon-Links ohne Text, etwa Suche, Menü, Schließen oder Social-Media-Symbole.
  • Ein aria-label, das vom sichtbaren Text abweicht: sichtbar steht „Senden“, angesagt wird „Formular abschicken“. Sprachsteuerung findet den Button dann nicht.
  • Nur ein Platzhalter im Feld. Der placeholder verschwindet beim Tippen und ist nur eine Notlösung für den Namen.
  • Zehnmal „Mehr erfahren“. Jeder Link hat einen Namen, aber in der Linkliste des Screenreaders sind sie nicht zu unterscheiden.
  • aria-label auf einem <div> ohne Rolle. Dort ist das Attribut nicht vorgesehen und wird von vielen Screenreadern ignoriert.

Wie Reviseberg damit umgeht

Die axe-core-Regeln button-name, link-name, label, select-name, input-button-name, aria-input-field-name und image-alt finden Bedienelemente, Felder und Bilder ohne zugänglichen Namen. Ob ein vorhandener Name treffend ist – „Button 1“ ist auch ein Name –, kann keine Regel entscheiden. Im Protokoll des Tastatur-Agenten steht bei jedem Schritt Rolle und Name des fokussierten Elements. So sieht ein Mensch schnell, wo Namen fehlen oder nichts sagen. Ob die sichtbare Beschriftung wirklich im Namen steckt, prüfen Sie am besten zusätzlich von Hand.

Verwandte Begriffe

Accessibility Tree · ARIA · Alternativtext · Formularbeschriftung · Sprachsteuerung

Weiterführend

Häufige Fragen

Wie finde ich den zugänglichen Namen eines Elements heraus?

In Chrome und Firefox zeigen die Entwicklerwerkzeuge im Bereich „Accessibility“ bzw. „Barrierefreiheit“ den berechneten Namen jedes Elements an.

Soll ich aria-label oder sichtbaren Text verwenden?

Wo es geht, sichtbaren Text. Er hilft allen, wird zuverlässig übersetzt und passt automatisch zur Sprachsteuerung. aria-label ist für Fälle ohne sichtbaren Text, etwa Icon-Buttons.

Ist der zugängliche Name dasselbe wie der Alternativtext?

Bei einem Bild wird der Alternativtext zum Namen. Der Begriff ist aber allgemeiner: Auch Links, Buttons, Felder und Dialoge haben einen zugänglichen Namen.

Quellen

  1. W3C, Accessible Name and Description Computation 1.2 – https://www.w3.org/TR/accname-1.2/
  2. W3C, HTML Accessibility API Mappings 1.0 – https://www.w3.org/TR/html-aam-1.0/
  3. W3C, WCAG 2.2, Erfolgskriterium 4.1.2 Name, Role, Value – https://www.w3.org/TR/WCAG22/#name-role-value
  4. W3C, Understanding SC 2.5.3 Label in Name – https://www.w3.org/WAI/WCAG22/Understanding/label-in-name
  5. W3C WAI, ARIA Authoring Practices Guide, Providing Accessible Names and Descriptions – https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/

Sehen Sie, was ein Scan auf Ihrer Website findet

Eine Seite in rund 30 Sekunden, ohne E-Mail. Der vollständige Bericht umfasst bis zu 100 Seiten und einen Tastatur-Durchlauf.

Kostenlos prüfen Preise ansehen