Praxisleitfaden Input-Schaltflächen
Leere Schaltflächen verständlich beschriften
Ein Input-Schalter ohne Namen verrät seine Aufgabe nicht. Sehen Sie, wie ein sichtbarer value-Text den Befund behebt und welche Funktionsprüfung anschließend noch fehlt.
input-button-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-input-button-name.html
Befund einordnen
Der Schalter ist vorhanden, sein Name fehlt
Scanner-Signal
input-button-name meldet .club-acceptance input[type="button"]: value ist leer und keine andere Namensquelle ist vorhanden.
Technische Einordnung
- Regel
input-button-name- Referenz
- WCAG 4.1.2
Im Abnahmepult einer fiktiven Modellbau-Seite steht links ein leerer Input-Schalter. Axe erkennt die native Schaltfläche, findet aber keinen zugänglichen Namen. Die Überschrift über der gesamten Leiste beschriftet dieses Element nicht automatisch.
Bedeutung im Nutzungskontext
Menschen mit Screenreader erfahren nicht, wozu der Schalter dient. Auch sichtbar fehlt ein Hinweis auf seine Aufgabe. Eine Position neben der Fachauswahl ersetzt keine eindeutige Beschriftung.
Diagnose am Element
Rolle: button
value: ""
Zugänglicher Name: leer
input-button-name: Verstoß (Axe-Auswirkung: critical)Erst die Aufgabe bestimmen, dann den Namen setzen
Ein beliebiger Text kann den Namenscheck bestehen. Brauchbar ist er erst, wenn er die tatsächliche Aktion bezeichnet. Der alte Schnellschalter im Beispiel besitzt noch keine hinterlegte Aktion.
Fundstelle ansehen
Der leere Schnellschalter im Abnahmepult
Der vollständige Ausschnitt enthält Überschrift, Erklärung, Schalter, Rücksprung, Fachauswahl und Detailfach. Die benachbarten unbeschrifteten Elemente bleiben im Bild, gehören aber nicht zu diesem Re-Test.
Markiert ist die graue Schaltfläche ganz links. Ihre Fläche ist sichtbar, doch weder auf dem Schalter noch in seinem zugänglichen Namen steht eine Handlung.
Beschriftung ergänzen
value liefert sichtbaren Text und Namen
Im Browser erhält nur der vorhandene Input-Schalter value="Tischkarte prüfen". Der Text erscheint direkt auf seiner Fläche und wird als zugänglicher Name erkannt. Die Beschriftung vergrößert den Schalter auf natürliche Weise.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
Tischkarte prüfen
Im Formular-Editor Bearbeiten Sie die Beschriftung der Schaltfläche. Kontrollieren Sie anschließend das gerenderte HTML: Bei einem Input-Schalter muss der sichtbare Text im value-Attribut ankommen.
Vollständigen Code vergleichen
Vorher
<input type="button" value="">Nachher
<input type="button" value="Tischkarte prüfen">Markierte Zeilen wurden geändert
In der Anwendung umsetzen
Name und Aktion zusammen entwickeln
Übernehmen Sie die Korrektur in die Komponente, die das Input-Element erzeugt. Das Beispiel demonstriert die Benennung; Ihr Produkt benötigt zusätzlich die zugehörige Funktion.
- 1
Formulieren Sie eine konkrete Handlung mit Gegenstand, etwa „Tischkarte prüfen“, statt nur „OK“ oder „Button“.
- 2
Setzen Sie den Text bei input in value. Ein input-Element kann keinen sichtbaren Kindtext wie ein button-Element enthalten.
- 3
Kontrollieren Sie vorhandene aria-label- und aria-labelledby-Angaben: Der zugängliche Name soll zur sichtbaren Beschriftung passen.
- 4
Prüfen Sie schmale Ansichten und längere Übersetzungen, damit der Text vollständig auf die Schaltfläche passt.
- 5
Betätigen Sie die fertige Aktion mit Tastatur und Zeiger und beobachten Sie das Ergebnis, einschließlich Fehler- und Erfolgsrückmeldung.
Fehlkorrekturen vermeiden
Diese Änderungen lassen Fragen offen
Nur name oder id eintragen
Diese Attribute identifizieren das Element für Code oder Formulardaten. Sie ersetzen hier keinen zugänglichen Namen.
Nur einen unsichtbaren ARIA-Namen ergänzen
Ein aria-label kann die automatische Namensprüfung erfüllen. Die leere sichtbare Fläche bleibt jedoch unverständlich. Bei diesem Textschalter ist value die direkte Korrektur.
Auf Browser-Standardtexte vertrauen
Submit- und Reset-Inputs können ohne value einen Standardnamen erhalten. Das gilt nicht pauschal für type="button" und ist kein Grund, einen ausdrücklich leeren value-Text stehen zu lassen.
Beschriftung mit Funktion verwechseln
type="button" löst ohne zugehörige Implementierung keine fachliche Aktion aus. Der ergänzte Name beweist weder eine Prüfung noch das Speichern der Tischkarte.
Der Name ist jetzt nachweisbar
Axe meldet am selben Input-Element nach der Änderung einen Pass für input-button-name. Die Browserprüfung findet es als Schaltfläche mit dem exakten Namen „Tischkarte prüfen“ und bestätigt seine Fokussierbarkeit.
Gelöst ist der fehlende Name an diesem Element. Die Kalibrierseite enthält für diesen alten Schalter keine Prüffunktion; deren Ablauf wurde deshalb nicht nachgewiesen. Andere Elemente und vollständige WCAG-Konformität sind nicht Gegenstand dieses Ergebnisses.
Re-Test am Element
Rolle: button
value: "Tischkarte prüfen"
Zugänglicher Name: Tischkarte prüfen
input-button-name: Pass
Fokus am Element: bestätigtPrüfgrenzen kennen
Ein vorhandener Name ist der Anfang
Die Regel prüft, ob Input-Schaltflächen einen auswertbaren Namen besitzen. Sie entscheidet nicht, ob der Name die richtige Handlung beschreibt.
Automatisch prüfbar
- Fehlende zugängliche Namen an Input-Schaltflächen erkennen.
- Die betroffene Stelle mit Selektor und Screenshot zuordnen.
- Den Namen nach einer Korrektur an derselben Fundstelle erneut prüfen.
Im Kontext zu entscheiden
- Beschriftung mit der tatsächlich ausgelösten Aktion vergleichen.
- Sinnvolle Fokusreihenfolge und verständliche Ausgabe mit assistiver Technik prüfen.
- Vollständigen Ablauf einschließlich Zustandswechseln und Rückmeldungen testen.