WCAG & BFSG · WCAG-Referenz: Bedienbar
WCAG 2.5.3: Beschriftung im Namen
Bei Bedienelementen mit sichtbarer Text-Beschriftung muss der zugängliche Name den sichtbaren Text enthalten – idealerweise beginnt er damit. Steht auf dem Button „Jetzt kaufen“, darf sein aria-label nicht „Zur Kasse“ heißen. (Englisch: Label in Name.)
| Stufe | Prinzip | Teil der WCAG seit | Rechtlich verbindlich? |
|---|---|---|---|
| A | Bedienbar | 2.1 (2018) | Ja – über EN 301 549 in BFSG & BITV |
Was verlangt das Kriterium?
Der „zugängliche Name“ (accessible name) ist das, was assistive Technologien für ein Element ansagen bzw. adressieren – berechnet aus Textinhalt, <label>, aria-label/aria-labelledby oder alt. Das Kriterium verlangt Deckung mit dem Sichtbaren, aus zwei Gründen:
- Sprachsteuerung: „Klicke Jetzt kaufen“ sucht den gesprochenen (= sichtbaren) Text im zugänglichen Namen. Weicht er ab, findet die Software nichts.
- Konsistenz für Screenreader-Nutzer, die sehen und hören: Ansage und Anzeige dürfen sich nicht widersprechen.
Wen betrifft es besonders?
Nutzer von Dragon, Voice Control und Voice Access – Menschen mit motorischen Einschränkungen, die per Stimme klicken. Für sie ist ein abweichender Name kein Schönheitsfehler, sondern ein toter Button.
Richtig & falsch im Code
<!-- Falsch: aria-label ersetzt den sichtbaren Text -->
<button aria-label="Bestellung abschließen">Jetzt kaufen</button>
<!-- Richtig: kein ARIA nötig – sichtbarer Text ist der Name -->
<button>Jetzt kaufen</button>
<!-- Richtig, wenn Ergänzung nötig: sichtbarer Text am Anfang -->
<a href="/bericht-2025.pdf">
Jahresbericht<span class="visually-hidden"> 2025 als PDF, 2 MB</span>
</a>
Merkregel: Erst gar kein aria-label auf Elemente mit sichtbarem Text. Der Textinhalt ist der beste zugängliche Name; ARIA ist für die Fälle ohne sichtbaren Text (Icon-Buttons) da – und dort beschreibt der Name, was man sieht bzw. was es tut.
So testest du es
- Automatisch: axe prüft „label-in-name“-Verstöße direkt.
- DevTools: Im Accessibility-Panel den „Computed Name“ jedes beschrifteten Bedienelements mit dem sichtbaren Text vergleichen.
- Praxisprobe: Voice Control (macOS/iOS) oder Voice Access (Android) aktivieren und die sichtbaren Beschriftungen ansprechen – „Klicke …“.
Verwandte Themen
- Sprachsteuerung – die Nutzerperspektive dahinter
- 4.1.2 Name, Rolle, Wert – woher der zugängliche Name kommt
- Die erste Regel von ARIA – weniger ARIA, weniger Probleme