# Leerer Button: Fehler verstehen und beheben

Source: https://allyway.ai/de/glossary/leerer-button

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) ist ein Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/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** |

> **Note:** > **Gleicher Fehler, anderes Element**
> Ein [leerer Link](https://allyway.ai/de/glossary/leerer-link) und ein leerer Button haben dieselbe Ursache und dieselbe Lösung. Der Unterschied: Links führen woandershin, Buttons lösen etwas auf der Seite aus.

## Praxisbeispiele

```html title="Beispiel"
<!-- 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](https://allyway.ai/de/glossary/fehlendes-alt-attribut) an diesem Bild erzeugt deshalb ebenfalls einen leeren Button.

**Do:** Do

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.

**Don't:** Don't

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](https://allyway.ai/de/integrations/shopify-accessibility-integration), prüfen Sie zuerst Warenkorb, Suche und Slider.

## Häufige Fragen

Q: Was ist ein leerer Button?
A: Eine Schaltfläche ohne zugänglichen Namen. Screenreader sagen an, dass es ein Button ist, aber nicht, was er tut.

Q: Reicht ein aria-label, um einen leeren Button zu beheben?
A: 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.

Q: Zählt das title-Attribut als Name?
A: 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.

Q: Wie finde ich leere Buttons auf meiner Website?
A: Prüfen Sie Ihre Startseite mit dem [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites). Er meldet leere Buttons zusammen mit verwandten Fehlern wie einem [fehlenden Formular-Label](https://allyway.ai/de/glossary/fehlendes-formular-label).

Q: Kann allyWay leere Buttons automatisch beheben?
A: 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](https://allyway.ai/de/automatic-accessibility-fixes-for-website) setzt das allyWay-Skript um, ohne Änderungen an Theme oder Code, und jede Korrektur lässt sich mit einem Klick zurücknehmen. [Kostenlos starten](https://app.allyway.ai/register) und sehen, welche Buttons allyWay auf Ihrer Website benennt.