Button ohne erkennbaren Text (button-name)

Die Regel button-name meldet <button>-Elemente ohne zugänglichen Namen. Ein Screenreader sagt dann nur „Schalter“, und niemand weiß, ob der Button das Menü öffnet, einen Dialog schließt oder etwas löscht. Fast immer ist es ein Icon-Button. Die Lösung ist Text im Button – sichtbar oder nur optisch versteckt – oder ein aria-label.

Was die Regel bedeutet

Jeder Button braucht einen Namen, der sagt, was er tut. Bei einem <button> kommt der Name normalerweise aus dem Text darin. Die Regel lässt einen Button bestehen, der seinen Namen bekommt über:

• Textinhalt, einschließlich des alt eines Bildes im Button,
• aria-label oder aria-labelledby,
• ein title-Attribut,
• oder ein damit verbundenes <label>.

Gemeldet wird ein Button, bei dem all das leer ist. Ein SVG-Icon mit aria-hidden="true", ein CSS-Hintergrundbild oder ein Zeichen aus einer Icon-Schrift gibt dem Button keinen Namen: Inhalte, die per CSS erzeugt werden, zählt axe nicht. Elemente mit role="button" prüft diese Regel nicht.

Die Regel prüft nur, dass es einen Namen gibt. Ein Button namens „Hier klicken“ oder „Icon“ besteht – ob der Name sagt, was der Button tut, beurteilt ein Mensch. Deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader hören mehrmals hintereinander „Schalter“, ohne die Buttons unterscheiden zu können. Wer per Sprache steuert, kann nicht „Klick auf Menü“ sagen, wenn der Menü-Button keinen Namen hat – es bleiben nummerierte Einblendungen oder ein Raster. Auf einer Braillezeile erscheint nur die Rolle. Leere Buttons gehören zu den häufigsten Fehlern im Web: Die WebAIM Million 2026 fand sie auf 30,6 % der eine Million meistbesuchten Startseiten ^[4].

Warum die Prüfung anschlägt

• Reine Icon-Buttons – Hamburger-Menü, Schließen-×, Suche, Warenkorb, Play, Slider-Pfeile – mit dem Icon als einzigem Inhalt.
• Icon-Schriften oder Hintergrundbilder, die das Symbol per CSS zeichnen; im Markup bleibt der <button> leer.
• Text mit display: none auf kleinen Bildschirmen – damit ist er auch für Screenreader weg.
• Slider-Punkte und Seitennavigation, die ein Slider-Skript erzeugt.
• Komponentenbibliotheken, deren IconButton eine Label-Eigenschaft hat, die nicht gesetzt wurde.
• Chat-, Cookie- und Feedback-Widgets von Drittanbietern.

So beheben Sie es

1. Wo Platz ist, zeigen Sie den Text: „Menü“, „Suchen“, „In den Warenkorb“.
2. Bei einem reinen Icon-Button ergänzen Sie optisch versteckten Text im Button oder ein aria-label. Das Icon selbst bekommt aria-hidden="true", damit es nicht zusätzlich vorgelesen wird.
3. Benennen Sie die Aktion, nicht das Icon: „Dialog schließen“ statt „X“, „Nächstes Bild“ statt „Pfeil“.
4. Beheben Sie es in der Button-Komponente, sodass ein Icon-Button ohne Beschriftung gar nicht erst entsteht.

<!-- Vorher: reine Icon-Buttons ohne Namen -->
<button class="menu-toggle" type="button" aria-expanded="false">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
<button class="modal-close" type="button"><span aria-hidden="true">×</span></button>

<!-- Nachher: versteckter Text im einen Button, aria-label am anderen -->
<button class="menu-toggle" type="button" aria-expanded="false">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
  <span class="visually-hidden">Menü</span>
</button>
<button class="modal-close" type="button" aria-label="Dialog schließen"><span aria-hidden="true">×</span></button>

/* Optisch versteckt, vom Screenreader weiter vorgelesen */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

Versteckter Text im Button wird von Übersetzungsfunktionen im Browser mit übersetzt – ein Grund, ihn aria-label vorzuziehen.

So prüfen Sie es von Hand

1. Öffnen Sie den Barrierefreiheits-Inspektor Ihres Browsers (Chrome, Edge, Firefox) und wählen Sie jeden Icon-Button: Der „Name“ darf nicht leer sein.
2. Gehen Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) per Tab durch die Seite. Jeder Button sollte sagen, was er tut, und zwei verschiedene Buttons sollten nicht gleich klingen.
3. Prüfen Sie, ob die Namen auch ohne Umgebung verständlich sind: „Button 1“, „Icon“ oder „Absenden“ im Newsletter-Formular sagen wenig.
4. Probieren Sie Sprachsteuerung, etwa die Sprachzugriff-Funktion unter Windows oder die Sprachsteuerung unter macOS: Sagen Sie „Klick“ und den Namen, den Sie erwarten.

Zugehöriges WCAG-Kriterium

4.1.2 Name, Rolle, Wert, Stufe A: Jedes Bedienelement braucht einen Namen, den assistive Technik lesen kann. Verwandt: 2.5.3 Beschriftung im Namen – zeigt der Button Text, muss sein Name diesen Text enthalten – und 1.1.1 Nicht-Text-Inhalt für Icons, die eine Bedeutung tragen.

So meldet Reviseberg diese Regel

Reviseberg führt button-name auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Buttons und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und jede Seite, auf der der Button vorkommt. Ein Menü-Button im Header erscheint auf jeder Seite – ein Fix im Template behebt alle Vorkommen.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren, etwa bei einem Widget eines Drittanbieters; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 4.1.2 nie als bestanden: Ob jeder Name stimmt, prüft ein Mensch.

Verwandte Regeln

• undefined – <input type="submit"> und ähnliche Buttons ohne Text.
• undefined – dasselbe Problem bei Links, oft ein Icon-Link.
• undefined – ein Button in einem anderen Bedienelement, dessen Inhalt Screenreader womöglich nicht ansagen.

Alle leeren Buttons Ihrer Website finden – kostenloser Scan