Prüfpunkt 4.1.2Stufe AHilfstechnik: Name, Rolle, Status
Wie bekommt ein Symbol-Knopf einen Namen?
Ein Knopf, der nur ein Symbol zeigt, bekommt seinen Namen über eine Angabe im Code: am einfachsten über das Attribut aria-label, bei einem Bild im Knopf über dessen Alternativtext. Der Browser berechnet den Namen nach einer festen Reihenfolge und nimmt die erste Angabe, die er findet. Fehlt jede, sagt das Vorleseprogramm nur „Schaltfläche“, und die Sprachsteuerung hat kein Wort, mit dem sie den Knopf treffen könnte.
Der Browser nimmt die erste Angabe, die er findet
Die Regel, nach der Browser den zugänglichen Namen berechnen, steht in der W3C-Spezifikation „Accessible Name and Description Computation“. Sie prüft der Reihe nach: zuerst aria-labelledby, also den Verweis auf einen Text, der schon auf der Seite steht; dann aria-label; dann die Mittel der Sprache selbst, bei HTML das alt-Attribut eines Bildes, das label-Element oder das title-Element eines SVG; dann den Textinhalt des Knopfes; zuletzt das title-Attribut. Jeder Schritt beginnt mit „andernfalls“: Die erste Angabe mit Inhalt gewinnt. Eine Angabe reicht also, aber sie muss am Knopf selbst stehen. Ein aria-label auf dem Symbol hilft nicht, wenn das Symbol für Hilfsprogramme verborgen ist, und das ist bei Symbolen in Knöpfen die richtige Einstellung.
Sichtbarer Text vor verstecktem Namen
MDN empfiehlt, aria-labelledby vor aria-label zu verwenden, sobald ein sichtbarer Text da ist, den der Knopf übernehmen kann, und beides nie zusammen: aria-labelledby gewinnt immer. Der Grund ist die Sprachsteuerung. Sie trifft einen Knopf über das Wort, das der Nutzer auf dem Bildschirm liest. Steht neben der Lupe das Wort „Suchen“, soll genau dieses Wort der Name sein. Ein Symbol allein bekommt seinen Namen per aria-label, als Tätigkeit formuliert: „Suche öffnen“, „Menü öffnen“, „Warenkorb anzeigen“. Auf einem div oder span ohne Rolle wirkt aria-label nicht; MDN führt deren Rolle generic unter den Rollen, die keinen Namen annehmen. Erst ein echtes button-Element oder role="button" macht aus dem Klickziel ein benanntes Bedienelement.
Namenlose Knöpfe sind ein Massenfehler
WebAIM fand 2026 auf 30,6 Prozent von einer Million Startseiten Schaltflächen ohne Namen. Der Grund ist fast immer derselbe: Ein Symbol ersetzt die Beschriftung, und niemand hat den Namen nachgetragen. Für den sehenden Besucher ist die Lupe eindeutig. Das Vorleseprogramm sagt „Schaltfläche“, die Sprachsteuerung findet kein Wort, und ein KI-Agent sieht im Barrierefreiheitsbaum eine namenlose Schaltfläche. Lupe, Menü und Warenkorb sind dabei genau die Knöpfe, über die ein Kunde sucht, sich zurechtfindet und kauft.
Beispiele
Menü-Knopf als div
<div class="burger" onclick="menue()"><svg>…</svg></div><button type="button" aria-label="Menü öffnen" aria-expanded="false" onclick="menue()">
<svg aria-hidden="true" focusable="false">…</svg>
</button>Das Vorleseprogramm sagt „Menü öffnen, Schaltfläche“ und beim Öffnen den neuen Zustand, sobald aria-expanded auf true steht.
Warenkorb-Link mit Bild
<a href="/warenkorb"><img src="korb.svg" alt=""></a><a href="/warenkorb"><img src="korb.svg" alt="Warenkorb anzeigen"></a>Der Link bekommt seinen Namen aus dem Alternativtext des Bildes. Ein leerer Alternativtext macht den Link namenlos.
Mehr zu diesem Thema
Weiter im Prüfbereich Barrierefreiheit
- Wer verlangt von mir die Stufe AAA?Kein Gesetz in Österreich oder Deutschland verlangt die Stufe AAA als Ganzes. Einzelne Kriterien verlangen Behörden, Ausschreibungen und Ihr Publikum.
- Für wen macht die Stufe AAA im Alltag einen Unterschied?Ältere Augen, nachlassendes Gehör, Menschen, die Texte nicht sinnentnehmend lesen: Welche AAA-Kriterien wem helfen, mit Zahlen von WHO und LEO-Studie.
- Wie erfahren blinde Besucher von Statusmeldungen einer Website?Statusmeldungen wie „Artikel im Warenkorb“ müssen Vorleseprogramme automatisch ansagen. Was WCAG-Kriterium 4.1.3 verlangt und wie wir es prüfen.
- Wann braucht ein Video eine Gebärdensprach-Übersetzung?WCAG 2.2 Kriterium 1.2.6 (Stufe AAA): Aufgezeichnete Videos mit Ton bekommen Gebärdensprache. Für wen das zählt, was es kostet, wie wir es einordnen.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
