Schaltflächen mit Namen

Was geprüft

Geprüft werden Schaltflächen: <button>, Elemente mit role="button" sowie input vom Typ submit, reset, button und image. Unauffällig ist der Punkt, wenn jede einen zugänglichen Namen hat (Text, aria-label, aria-labelledby, title, value oder alt beim Bild-Button). Ein Absende-Button ohne value hat einen Standardnamen des Browsers; value="" dagegen nicht. Ohne Schaltflächen trifft der Punkt nicht zu. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Mittel, sobald eine Schaltfläche ohne Namen gefunden wird. Betroffen sind meist Menü-, Such- oder Schließen-Symbole, über die zentrale Funktionen laufen.

Warum

Screenreader sagen bei einer Schaltfläche ohne Namen nur „Schaltfläche“. Ob sie das Menü öffnet, ein Fenster schließt oder ein Formular absendet, bleibt unklar. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Geben Sie Symbol-Schaltflächen ein aria-label oder einen visuell versteckten Text. Bei Schaltern wie dem Menü zusätzlich aria-expanded setzen, damit der Zustand angesagt wird.

Nebenwirkung: Keine technischen Nebenwirkungen. Wenn ein Skript den Text der Schaltfläche austauscht, prüfen Sie, dass der Name danach erhalten bleibt.

WordPress: Mobile Menü-Schalter und Schließen-Kreuze von Popups und Einwilligungsbannern sind häufige Fundstellen. Viele Themes und Plugins bieten dafür ein Beschriftungsfeld; sonst hilft ein kleines Skript oder eine Anpassung im Child-Theme.

Codebeispiel

HTML

<button type="button" aria-label="Menü öffnen" aria-expanded="false" aria-controls="hauptmenue">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<button type="button" class="dialog-schliessen">
  <span aria-hidden="true">×</span>
  <span class="screen-reader-text">Hinweis schließen</span>
</button>

<input type="image" src="/bilder/suche.svg" alt="Suchen">

Weiterführende Quellen

Quellen der Methodik

docs/SCORING.md — Status und Schweregrade (§2), Kategoriescore und Abdeckung (§3), Gesamtwert (§4), keine Doppelabzüge (§5), Prüfkatalog mit Gewichten (§6), Versionierung (§8), Formulierungsregeln (§9), bewusst nicht geprüft (§10)
docs/KALIBRIERUNG.md — Abgleich der Schwerefaktoren und Kappen mit externen Ankern (Web Almanac, Lighthouse, MDN HTTP Observatory, SSL Labs), Entscheidung scoring@1.4.0