Leerer Button: Fehler verstehen und beheben
Also called: Button ohne Text, Schaltfläche ohne Namen, Unbenannte Schaltfläche
Definition
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ein Screenreader kann nicht ansagen, was sie tut. Prüftools melden ihn als „Leerer Button“, „Empty button“ oder „Schaltfläche ohne zugänglichen Namen“. Meist sind es reine Icon-Buttons: die Lupe der Suche, das Hamburger-Menü, das „ד zum Schließen eines Pop-ups oder die Pfeile eines Sliders.
Was es bedeutet
Sehende Menschen erkennen die Funktion am Symbol. Ein Screenreader braucht Text. Ohne Namen sagt er nur „Schalter“ oder „Taste“, und die Person muss drücken, um herauszufinden, was passiert – das kann „Weiter“ sein, aber genauso gut „Löschen“. Wer per Sprachsteuerung arbeitet, hat dasselbe Problem: „Klick auf Suche“ funktioniert nicht, wenn der Button keinen passenden Namen hat.
WCAG 4.1.2 Name, Rolle, Wert ist ein Kriterium der Stufe A in WCAG 2.2. Es verlangt, dass Name und Rolle jedes Bedienelements programmatisch ermittelbar sind. Ein natives <button> bringt die richtige Rolle schon mit – es scheitert nur am fehlenden Namen. Das W3C führt diesen Fall als Fehler F68: ein Bedienelement ohne programmatisch ermittelten Namen. Namen dürfen sichtbar oder unsichtbar sein, sollten laut W3C aber in vielen Fällen der sichtbaren Beschriftung entsprechen.
| Inhalt des Buttons | Quelle des Namens | Ergebnis |
|---|---|---|
<button>Suchen</button> |
Text im Button | Besteht |
Icon + aria-label="Suchen" |
aria-label | Besteht |
<img alt="Suchen"> im Button |
Alternativtext des Bildes | Besteht |
| Nur Icon, kein Label | – | Leerer Button |
<img> ohne alt oder mit alt="" |
– | Leerer Button |
Praxisbeispiele
<!-- Leerer Button: nur ein Icon -->
<button class="close"><svg aria-hidden="true">…</svg></button>
<!-- Behoben: zugänglicher Name per aria-label -->
<button class="close" aria-label="Dialog schließen"><svg aria-hidden="true">…</svg></button>
<!-- Behoben: Bild mit Alternativtext -->
<button type="submit"><img src="lupe.svg" alt="Suchen"></button>Bilder als Button-Inhalt brauchen eine Textalternative. Ein fehlendes Alt-Attribut an diesem Bild erzeugt deshalb ebenfalls einen leeren Button.
Die Aktion in ein bis zwei Wörtern benennen: „Suchen“, „Menü öffnen“, „Dialog schließen“, „Nächstes Bild“. Dekorative Icons in einem benannten Button mit aria-hidden="true" ausblenden.
Ein div oder span als Button gestalten, ohne Rolle und Namen zu vergeben, sich nur auf Tooltip oder title verlassen oder allen Icon-Buttons denselben Namen geben („Button“, „Icon“).
So beheben Sie einen leeren Button
Theme-Widgets und Page-Builder erzeugen häufig leere Buttons. Nutzen Sie Shopify, prüfen Sie zuerst Warenkorb, Suche und Slider.
Häufige Fragen
Was ist ein leerer Button?
Eine Schaltfläche ohne zugänglichen Namen. Screenreader sagen an, dass es ein Button ist, aber nicht, was er tut.
Reicht ein aria-label, um einen leeren Button zu beheben?
Ja, für reine Icon-Buttons ist aria-label eine anerkannte Technik (ARIA14). Zeigt der Button sichtbaren Text, sollte der Name diesen Text enthalten, damit Sprachsteuerung funktioniert.
Zählt das title-Attribut als Name?
Browser nutzen title nur als letzte Notlösung. Auf Touch-Geräten und für Tastaturnutzer ist es nicht sichtbar. Besser sind aria-label oder sichtbarer Text.
Wie finde ich leere Buttons auf meiner Website?
Prüfen Sie Ihre Startseite mit dem kostenlosen WCAG-Scanner. Er meldet leere Buttons zusammen mit verwandten Fehlern wie einem fehlenden Formular-Label.
Kann allyWay leere Buttons automatisch beheben?
Ja. allyWay erkennt namenlose Buttons auf Ihrer gesamten Website und gibt ihnen klare Namen, die Screenreader vorlesen können – von der KI aus Ihren Seiteninhalten geschrieben. Die automatischen Korrekturen setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. Kostenlos starten und sehen, welche Buttons allyWay auf Ihrer Website benennt.
Related terms
Leerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenFehlendes Formular-Label: Fehler erklärt und behoben
Ein fehlendes Formular-Label bedeutet, dass ein Eingabefeld, eine Checkbox, eine Auswahlliste oder ein Textbereich keine verknüpfte Beschriftung und keinen anderen zugänglichen Namen hat. Screenreader sagen nur den Feldtyp an.
Read definition: Fehlendes Formular-Label: Fehler erklärt und behobenFehlendes Alt-Attribut: Fehler erklärt und behoben
Ein fehlendes Alt-Attribut bedeutet, dass ein img-Element (oder ein Bild-Button bzw. Bereich einer Imagemap) gar kein alt-Attribut hat. Assistive Technologien wissen dann nicht, ob das Bild wichtig oder dekorativ ist, und lesen unter Umständen den Dateinamen vor.
Read definition: Fehlendes Alt-Attribut: Fehler erklärt und behoben