2.5.3 Beschriftung im Namen

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du willst per Sprachbefehl einen „Absenden“-Button aktivieren – aber der Computer reagiert nicht, obwohl das Wort deutlich auf dem Bildschirm steht. Frustrierend, oder? Genau das erleben Menschen mit Sprachsteuerung immer wieder, wenn sichtbare Beschriftungen nicht mit den Namen im Code übereinstimmen.

Das Ziel von Erfolgskriterium 2.5.3 der WCAG ist daher eindeutig: Was Menschen sehen, soll auch das sein, was die Technik versteht. Konkret: Der sichtbare Text eines Bedienelements muss in dessen zugänglichem Namen enthalten sein.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um alle Bedienelemente mit Beschriftungen, die aus Text oder Textbildern bestehen:

Der zugängliche Name enthält den sichtbar dargestellten Text. Beide müssen nicht identisch sein – aber der sichtbare Text muss im Namen vorkommen, möglichst als zusammenhängende Wortfolge in derselben Reihenfolge.

Empfehlung aus dem Normtext: Der sichtbare Text steht am Anfang des zugänglichen Namens. Zeigt ein Button „Kaufen“, ist „Kaufen: Produkt XY für 29,99 €“ ideal. „Produkt XY kaufen“ erfüllt das Kriterium zwar ebenfalls, weil „kaufen“ enthalten ist, ist aber weniger robust.

Wofür es nicht gilt: Das Kriterium greift nur bei Bedienelementen mit sichtbarer Textbeschriftung. Reine Symbol-Buttons ohne Text fallen nicht darunter – sie brauchen trotzdem einen zugänglichen Namen nach Name, Rolle, Wert.

Ein praktisches Beispiel: Ein „Anmelden“-Button ist klar beschriftet. Wer Sprachsteuerung nutzt, sagt „Klick Anmelden“ – und erwartet, dass genau dieser Button reagiert. Steht im Code aber aria-label="Einloggen", läuft der Sprachbefehl ins Leere.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du versuchst, per Sprache durch eine Website zu navigieren, aber die Hälfte der sichtbaren Buttons reagiert nicht auf deine Befehle. Oder du nutzt einen Screenreader und hörst ganz andere Bezeichnungen als die, die du auf dem Bildschirm siehst.

Übereinstimmende Beschriftungen schaffen Barrierefreiheit, weil sie:

• Menschen mit Sprachsteuerung ermöglichen, Elemente über das zu aktivieren, was sie sehen – ein „Senden“-Button reagiert auf „Senden“
• Screenreader-Nutzer:innen helfen, die zusätzlich sehen – sie hören, was sie auch lesen, und können sich leichter mit sehenden Menschen über die Oberfläche austauschen
• Menschen mit kognitiven Einschränkungen entlasten, weil sie sich keine abweichenden Befehle merken müssen
• Einheitlichkeit schaffen zwischen verschiedenen Eingabemethoden – egal ob Maus, Tastatur, Sprache oder Touch

Und: Die Bedienung wird für alle vorhersagbarer, auch für Menschen, die nur gelegentlich Sprachsteuerung nutzen.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Wenn du semantisch sauberes HTML schreibst, passiert das meist automatisch. Hier die wichtigsten Praxis-Tipps:

Semantische HTML-Elemente nutzen:

• <button>Absenden</button> funktioniert automatisch richtig.
• <label for="name">Name</label> <input id="name"> stellt die korrekte Verbindung her.
• <a href="/">Startseite</a> braucht keine zusätzlichen Attribute.

Bei ARIA vorsichtig sein:

• Wenn du aria-label verwendest, muss es den sichtbaren Text enthalten.
• Nutze lieber aria-labelledby, um auf die sichtbare Beschriftung zu verweisen.
• Verzichte auf aria-label, wenn bereits eine sichtbare Beschriftung existiert, die passt.

<!-- Gut: sichtbarer Text am Anfang des Namens -->
<button aria-label="Kaufen: Wanderschuh Alpin">Kaufen</button>

<!-- Fehler: sichtbarer Text fehlt im Namen -->
<button aria-label="In den Warenkorb legen">Kaufen</button>

Die Reihenfolge beachten:

• Der sichtbare Text sollte am Anfang des zugänglichen Namens stehen.
• Zusätzlicher Text darf folgen, der sichtbare Text sollte aber nicht zerstückelt oder umgestellt werden.

Prüfen:

• Die Browser-Entwicklerwerkzeuge zeigen den berechneten zugänglichen Namen im Bereich „Barrierefreiheit“ an.
• Teste mit einem Screenreader, z. B. dem kostenlosen NVDA.
• Teste mit Sprachsteuerung: Sprachzugriff unter Windows 11, Sprachsteuerung unter macOS und iOS oder Voice Access unter Android.

Häufige Fallstricke vermeiden:

• Platzhaltertext ist kein Ersatz für eine Beschriftung.
• Bei Textbildern muss der Alternativtext den sichtbaren Text enthalten.
• Symbole, die als Text gelesen werden könnten, sorgfältig prüfen – im Zweifel lieber eine echte Textbeschriftung ergänzen.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

2.5.3 ist Teil von WCAG 2.1 Level A und damit über die EN 301 549 Maßstab für das BFSG, das seit dem 28. Juni 2025 unter anderem für Onlineshops, Bankdienstleistungen und andere Dienstleistungen für Verbraucher:innen gilt. Auch öffentliche Stellen müssen es über die BITV 2.0 bzw. das Landesrecht erfüllen. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

1. Mehr Menschen erreichen

Sprachsteuerung ist längst fester Bestandteil der großen Betriebssysteme. Neben Menschen mit motorischen Einschränkungen nutzen sie auch Menschen mit vorübergehenden Verletzungen oder in Situationen, in denen die Hände belegt sind. Mit übereinstimmenden Beschriftungen funktioniert deine Website für sie alle.

2. Wenig Aufwand, große Wirkung

Meist reicht es, überflüssige oder abweichende aria-label-Attribute zu entfernen. Das ist eine der günstigsten Verbesserungen überhaupt – und vermeidet einen klassischen Prüffehler.

3. Qualität generell verbessern

Wenn sichtbare und programmatische Beschriftungen übereinstimmen, lassen sich automatisierte Tests leichter schreiben, Übersetzungen bleiben konsistent und die Qualitätssicherung wird einfacher.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 2.5.3 Label in Name (Level A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Note: A best practice is to have the text of the label at the start of the name.

Kurz gesagt: Bei Bedienelementen mit sichtbarer Textbeschriftung muss der zugängliche Name diesen Text enthalten – am besten gleich am Anfang.