Bedien-Elemente brauchen Namen: Buttons für Vorlese-Software erkennbar machen

Einige Schaltflächen Ihrer Seite haben keinen für Vorlese-Software erkennbaren Namen — blinde Besucher erfahren dann nicht, welche Funktion ein Klick auslöst. EverAudit prüft jeden Button und jedes Eingabefeld vom Typ Button automatisiert gegen WCAG 4.1.2 (Name, Role, Value) und meldet fehlende Beschriftungen als kritischen Befund.

Was ist das Problem?#

Ein Button gilt für Screenreader nur dann als beschriftet, wenn er einen sogenannten „zugänglichen Namen" (accessible name) hat. Diesen berechnet der Browser aus sichtbarem Text, aria-label, aria-labelledby oder — bei Eingabe-Buttons — dem value-Attribut. Fehlt all das, meldet der Screenreader nur „Schaltfläche" oder liest den Button komplett stumm.

Häufigste Ursache: Icon-only-Buttons ohne begleitenden Text — ein Lupensymbol für die Suche, ein X für „Schließen", drei Punkte für ein Menü. Visuell ist die Funktion klar, technisch bleibt sie unbenannt.

Warum prüft EverAudit das?#

EverAudit stuft button-name und input-button-name als prio1-Befund ein, weil ein unbenannter Button eine Funktion vollständig blockiert — nicht nur erschwert. Ein Suchen-Button ohne Namen lässt sich von Screenreader-Nutzern schlicht nicht sicher auslösen. Weil solche Buttons oft in wiederverwendeten UI-Komponenten stecken (Header, Formular-Aktionen, Karten-Listen), betrifft ein einzelner Fehler häufig viele Seiten gleichzeitig.

Welche Auswirkung hat das?#

Betroffene Besucher können wichtige Funktionen nicht nutzen — etwa das Absenden eines Formulars, das Öffnen eines Menüs oder das Entfernen eines Warenkorb-Artikels. Das führt zu Frustration und Abbrüchen genau an den Stellen, die für Ihre Conversion am wichtigsten sind: Formular- und Checkout-Buttons. Für B2C-Anbieter ist das seit dem BFSG (28.06.2025) auch ein Punkt, den eine Barrierefreiheitserklärung realistisch abbilden muss.

Wie beheben Sie unbenannte Buttons?#

Bevorzugen Sie sichtbaren Text — er hilft allen Besuchern, nicht nur Screenreader-Nutzern. Ist aus Design-Gründen nur ein Icon sichtbar, ergänzen Sie einen versteckten, aber vorlesbaren Namen:

<!-- Icon-only-Button ohne Namen -->
<button><svg aria-hidden="true">…</svg></button>

<!-- korrigiert: sichtbarer Text via sr-only-Klasse -->
<button>
  <svg aria-hidden="true">…</svg>
  <span class="sr-only">Suche öffnen</span>
</button>

<!-- Alternative: aria-label -->
<button aria-label="Suche öffnen">
  <svg aria-hidden="true">…</svg>
</button>

Bei <input>-Buttons kommt die Beschriftung über value oder aria-label:

<!-- fehlt: erkennbarer Text -->
<input type="submit">

<!-- korrigiert -->
<input type="submit" value="Formular absenden">

Praktisches Vorgehen:

1. Icon-only-Buttons identifizieren — EverAudit listet Selektor und Fundort je Befund.
2. Sichtbaren Text bevorzugen, wo das Design es zulässt (auch als visuell versteckte sr-only-Klasse möglich).
3. aria-label als Fallback setzen, wenn kein sichtbarer Text möglich ist — kurz und funktionsbeschreibend („Suche öffnen", nicht „Icon").
4. Nicht auf title verlassen — es wird von vielen Hilfsmitteln nicht zuverlässig ausgegeben.
5. Zentral in der Komponente fixen — ein Icon-Button aus dem Design-System korrigiert, behebt den Fehler auf allen Seiten, die ihn verwenden.

Fazit#

Ein Button ohne erkennbaren Namen ist für Screenreader-Nutzer eine unsichtbare, nicht auslösbare Funktion. Die Lösung ist meist unaufwändig: sichtbarer Text oder ein präzises aria-label — konsequent an der zugrunde liegenden Komponente angewendet, damit der Fix nicht nur eine Fundstelle, sondern das ganze Muster abdeckt.