button-name · WCAG 4.1.2 Name, Role, Value · Stufe AWie Sie das „button-name“-Problem beheben
Die axe-core-Regel button-name schlägt fehl, wenn ein <button> (oder Element mit role="button") keinen zugänglichen Namen hat — meist ein reiner Icon-Button. Screenreader sagen „Schaltfläche“ ohne Zweck. WCAG 2.2 (4.1.2, Stufe A) verlangt für jedes Bedienelement einen Namen.
Was axe-core prüft
axe-core meldet jeden Button mit leerem zugänglichem Namen: kein Textinhalt, kein aria-label/aria-labelledby und kein title.
Welcher Norm das entspricht
| WCAG 2.2 | 4.1.2 Name, Role, Value (Stufe A) |
| EN 301 549 | 9.4.1.2 |
| BFSG / EAA | BFSG § 12 i. V. m. EN 301 549 · EAA Anhang I |
| Kategorie | Formulare & Labels |
Warum es zählt
Icon-Buttons — Hamburger-Menü, Schließen (×), In-den-Warenkorb, Mengenregler — sind in jedem Shop. Ein unbenannter Button ist für Tastatur- und Screenreader-Nutzer tot und ein klarer Stufe-A-Fehler in einer BFSG-Prüfung.
Häufige Ursachen
- Reine Icon-Buttons (Menü, Schließen, Suche) ohne Label
- Buttons nur mit Inline-
<svg>ohne Titel - Ein
<div role="button">ohne Namen - Reine CSS-„Buttons“, die eigentlich leere Elemente sind
Wie Sie es beheben
Geben Sie dem Button sichtbaren Text oder ein aria-label, wenn er Icon-only bleiben muss. Verbergen Sie das dekorative Icon mit aria-hidden="true".
<!-- Fehler -->
<button><svg>…</svg></button>
<!-- Besteht -->
<button aria-label="Dialog schließen"><svg aria-hidden="true">…</svg></button>FAQ
Bevorzugen Sie sichtbaren Text; das hilft allen. aria-label nur, wenn der Button bewusst Icon-only ist.
axe akzeptiert title als Rückfall, aber title ist auf Touch unzuverlässig und wird nicht konsistent vorgelesen — nutzen Sie ein Label.
Finden Sie jeden solchen Fehler auf Ihrer Seite
Starten Sie einen kostenlosen WCAG 2.2 AA-Scan — echte axe-core-Engine, ohne Anmeldung. Oder ein zeitgestempelter Beweis-Report für 29 €.