A: Eingabeschaltflächen müssen wahrnehmbaren Text beinhalten (WCAG 4.1.2)
input-button-name
Stellt sicher, dass Eingabeschaltflächen wahrnehmbaren Text beinhalten.
Das bedeutet
<input type="button">, type="submit", type="reset" und type="image" brauchen einen zugänglichen Namen. Ohne value, aria-label oder aria-labelledby ist für Screenreader nur „Schaltfläche“ hörbar. Bei type="image" liefert nur alt den Namen. Hintergrundbilder oder Platzhalter sind kein Name.
Auswirkung
Ohne verständliche Benennung wissen Nutzerinnen und Nutzer nicht, was die Schaltfläche auslöst. Vorgänge werden abgebrochen und es droht ein WCAG Verstoß.
Empfehlung
-
Bei
<input>einen klaren value setzen, z. B.value="Bestellung senden". -
Alternativ aria-label oder aria-labelledby nutzen.
-
Für
type="image"immer ein alt vergeben. -
Nicht auf Titel, Platzhalter oder reine Icons verlassen.
-
Wo möglich
<button>mit sichtbarem Text verwenden.
Beispiel
Problematisch
<input type="submit">
<input type="button" value="">
<input type="image" src="search.png" alt="">
Besser
<input type="submit" value="Bestellung senden">
<input type="button" value="Dialog öffnen">
<input type="image" src="search.png" alt="Suche starten">
<!-- Alternative mit Button -->
<button type="submit">Bestellung senden</button>
Verknüpfte WCAG-Kriterien:
WCAG 4.1.2 - Name, Rolle, Wert