Praxisleitfaden ARIA-Eingabefelder beschriften
Das Textfeld ist sichtbar. Sein Name fehlt.
Ein selbst gebautes Eingabefeld braucht einen Namen, den assistive Technik auslesen kann. Prüfen Sie am Beispiel einer Court-Anmeldung, wie Sie den Befund erkennen und die Beschriftung ergänzen.
aria-input-field-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-input-field-name.html
Befund verstehen
Die Rolle erklärt noch nicht den Zweck
Scanner-Signal
aria-input-field-name meldet am Element [role="textbox"] einen fehlenden zugänglichen Namen.
Technische Einordnung
- Regel
aria-input-field-name- Referenz
- WCAG 4.1.2
Das große leere Feld unter der Überschrift ist ein editierbares div mit der Rolle textbox. Weder aria-label noch aria-labelledby oder title liefern ihm einen Namen. Die Überschrift bezeichnet die gesamte Anmeldung, nicht das einzelne Feld.
Bedeutung im Nutzungskontext
Wer mit einem Screenreader zwischen Eingabefeldern navigiert, kann die erwartete Eingabe hier nicht anhand einer Feldbeschriftung erkennen. Der sichtbare Rahmen vermittelt diesen Zweck ebenfalls nicht.
Namensdiagnose vor der Korrektur
Rolle: textbox
Editierbar: true
Zugänglicher Name: fehlt
aria-input-field-name: Verstoß (Axe-Auswirkung: serious)Feldbeschriftungen bis zur Ausgabe verfolgen
Ein Beschriftungsfeld im Editor hilft erst, wenn es am editierbaren Element ankommt.
- Anmeldung× Befund im Beispiel
- Anmeldung bearbeiten× Befund im Beispiel
- Kontaktformular Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenKontrollieren Sie Namen und Eingabe in den veröffentlichten Formularzuständen.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Woher soll das Feld seinen Namen erhalten?
Klären Sie zuerst, was hier eingegeben werden soll. Für die Beispielkorrektur dient das freie Textfeld als Anmerkung zur Court-Anmeldung. Wählen Sie danach die passende Verknüpfung.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Sichtbarer Beschriftungstext ist vorhanden | Ein Text neben dem Feld benennt bereits genau dessen Zweck. | Vergeben Sie für diesen Text eine eindeutige ID und referenzieren Sie sie am ARIA-Feld mit aria-labelledby. |
| Es gibt noch keinen Beschriftungstext | Wie im Beispiel ist nur ein leeres Eingabefeld zu sehen. | Ein konkretes aria-label behebt den Namensbefund. Ergänzen Sie für die praktische Nutzung auch eine sichtbare Beschriftung, damit der Zweck für alle erkennbar wird. |
| Ein normales HTML-Feld reicht aus | Die Anwendung benötigt keine besondere editierbare Komponente. | Verwenden Sie input oder textarea mit zugeordnetem label. Prüfen Sie beim Austausch auch Tastaturbedienung, Datenbindung und Formularübermittlung. |
Fundstelle ansehen
Das unbenannte Feld in der Court-Anmeldung
Der vollständige Anmeldeblock zeigt Überschrift, Textfeld und benachbarte Steuerelemente. Markiert ist ausschließlich das breite editierbare Feld direkt unter der Überschrift.
Die benachbarten Texte „Court-Kürzel“ und „Gruppen-Kürzel“ gehören zu anderen Eingaben. Sie beschriften das markierte ARIA-Textfeld nicht. Das Beispiel stammt aus einer Kalibrierseite mit absichtlich eingebauten Fehlern.
Namen ergänzen
Die Beschriftung direkt am Textfeld setzen
Die gezeigte Korrektur ergänzt aria-label am vorhandenen div. Sie erhält denselben DOM-Knoten, die Rolle und die Editierbarkeit. „Anmerkung zur Court-Anmeldung“ beschreibt den für dieses Beispiel gewählten Eingabezweck.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Anmerkung zur Court-Anmeldung"
In der eigenen Komponente Reichen Sie die Beschriftung bis an das Element mit role="textbox" durch. Ein Name am äußeren Container beschriftet das innere Eingabefeld nicht automatisch.
Vollständigen Code vergleichen
Vorher
<div role="textbox"
contenteditable="true"></div>Nachher
<div role="textbox"
contenteditable="true"
aria-label="Anmerkung zur Court-Anmeldung"></div>Markierte Zeilen wurden geändert
In der Anwendung umsetzen
Den Namen dauerhaft an die Eingabe binden
Beschriftungen gehören in die wiederverwendbare Feldkomponente und in ihre Übersetzungen. Eine einzelne DOM-Korrektur genügt nicht, wenn das nächste Rendern sie wieder entfernt.
- 1
Benennen Sie die erwartete Eingabe konkret; „Textfeld“ wiederholt lediglich die Rolle.
- 2
Verwenden Sie vorhandene sichtbare Beschriftungen mit aria-labelledby und prüfen Sie die referenzierten IDs im gerenderten DOM.
- 3
Setzen Sie den Namen unabhängig vom eingegebenen Wert: Eine Notiz darf sich ändern, ohne die Feldbeschriftung zu ersetzen.
- 4
Prüfen Sie nach Sprachwechsel und dynamischem Nachladen, dass jede Feldinstanz ihre richtige Beschriftung behält.
Fehlversuche vermeiden
Diese Änderungen lassen die Zuordnung offen
Nur ein label um das div legen
Ein div wird durch role="textbox" nicht zu einem nativ beschriftbaren HTML-Formularfeld. Verwenden Sie für diese Komponente eine explizite ARIA-Namenszuordnung.
aria-describedby als Namen verwenden
Eine Beschreibung ergänzt Hinweise zur Eingabe. Sie ersetzt nicht deren zugänglichen Namen.
Auf eine fehlende ID verweisen
aria-labelledby hilft nur, wenn die referenzierten Elemente tatsächlich passende Namenstexte liefern. Prüfen Sie auch bedingt eingeblendete Beschriftungen.
Die Rolle entfernen, damit der Befund verschwindet
Ein weiterhin editierbares Sonderfeld braucht eine passende Semantik. Das Entfernen der Rolle ersetzt weder eine korrekte Beschriftung noch einen fachlich geprüften Umbau.
Dasselbe Feld besteht den Namenstest
Vor der Korrektur meldet Axe einen Namensbefund mit der Axe-Auswirkung serious. Danach besteht derselbe Textfeld-Knoten aria-input-field-name. Die sichtbaren Pixel bleiben identisch, weil aria-label keinen Beschriftungstext auf der Seite zeichnet.
Verifiziert ist nur der Namensbefund an diesem Textfeld. Eine sichtbare Beschriftung, die vollständige Bedienbarkeit und die übrigen Fehler der Anmeldung sind damit nicht erledigt.
Namensdiagnose nach der Korrektur
Rolle: textbox
Editierbar: true
Name über aria-label: Anmerkung zur Court-Anmeldung
Axe: pass am selben Knoten
Sichtbare Feldbeschriftung: weiterhin nicht vorhandenPrüfgrenzen kennen
Ein vorhandener Name ist der erste Schritt
Die Regel prüft die Benennung von ARIA-Eingaben wie textbox, combobox, listbox, searchbox, slider und spinbutton. Ob eine Person das Formular erfolgreich ausfüllen kann, erfordert weitere Prüfungen.
Automatisch prüfbar
- Fehlende zugängliche Namen an den unterstützten ARIA-Eingaberollen erkennen
- Leere oder unwirksame Namenszuordnungen als Befund ausgeben
- Die Benennung nach der Korrektur am ausgewählten Element erneut prüfen
Im Kontext zu entscheiden
- Bewerten, ob der Name die tatsächlich erwartete Eingabe verständlich bezeichnet
- Sichtbare Beschriftung und zugänglichen Namen miteinander vergleichen
- Fokus, Texteingabe, Validierung und Übermittlung im vollständigen Nutzerweg prüfen