ARIA-Eingabefeld ohne Namen (aria-input-field-name)

Die Regel aria-input-field-name meldet selbst gebaute Eingabe-Widgets – Elemente mit einer Rolle wie combobox, textbox, listbox, searchbox, slider oder spinbutton –, die keinen zugänglichen Namen haben. Ein Screenreader sagt dann „Kombinationsfeld“ oder „Eingabefeld“, aber nicht, wofür. Die Lösung ist aria-labelledby, das auf die sichtbare Beschriftung zeigt, oder aria-label, wo es keine gibt.

Was die Regel bedeutet

Native Felder bekommen ihren Namen von einem <label>. Ein <div> mit role="textbox" nicht: <label for> beschriftet in HTML nur echte Formularelemente. Ein eigenes Widget muss daher per ARIA benannt werden. Die Regel lässt ein Element mit einer dieser sechs Rollen bestehen, wenn es hat:

• aria-labelledby, das auf ein Element mit Text zeigt,
• aria-label mit Text darin,
• oder ein title-Attribut.

Native <input>, <select> und <textarea> prüft diese Regel nicht – das übernehmen undefined und undefined. Ebenso wenig eine Listbox, die als Aufklappliste zu einer Combobox gehört, oder eine Combobox, die ein echtes <input> enthält.

Einen Fall entscheidet axe nicht selbst: ein <label>, das mit einem eigenen Element verbunden ist, dessen zugänglicher Name den Label-Text aber nicht enthält. Das Label wirkt verbunden und erreicht die assistive Technik trotzdem nicht – axe gibt das Element deshalb zur Prüfung zurück. Ob ein vorhandener Name auch etwas aussagt – „Feld“, „Eingabe 3“ –, beurteilt ebenfalls ein Mensch. Deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader, die eine Rolle ohne Namen hören und raten müssen, was einzugeben oder zu wählen ist. Wer per Sprache steuert, kann ein Feld nicht über einen Namen ansprechen, den es nicht hat. Auf einer Braillezeile ist der Name das Einzige, was zum Bedienelement angezeigt wird.

Warum die Prüfung anschlägt

• Komponentenbibliotheken, deren Combobox, Datumsauswahl oder Tag-Eingabe eine label-Eigenschaft hat, die leer blieb.
• Rich-Text-Editoren – ein contenteditable-Bereich mit role="textbox", beschriftet nur durch die Überschrift darüber.
• Eigene Schieberegler für Preise oder Mengen, aus <div>s mit role="slider" gebaut.
• <label for>, das auf ein <div> zeigt – im Markup sieht es richtig aus, benennt aber nichts.
• Suchvorschläge als eigene searchbox im Header, nur mit Lupen-Icon.
• Selbst gebaute „Select“-Ersatzlösungen in Themes, deren sichtbare Beschriftung ein benachbartes <span> ist.

So beheben Sie es

1. Fragen Sie zuerst, ob Sie das eigene Widget brauchen. Ein natives <input>, <textarea>, <select> oder <input type="range"> bekommt seinen Namen von einem <label> und bringt die Tastaturbedienung mit.
2. Wenn Sie es behalten: Geben Sie der sichtbaren Beschriftung eine id und verweisen Sie mit aria-labelledby darauf. aria-label nur, wo es keinen sichtbaren Text gibt.
3. Beheben Sie es in der Komponente, dann hat jede Instanz einen Namen.

<!-- Vorher: eigene Felder, sichtbarer Text daneben, aber kein Name -->
<p class="field-title">Ihre Nachricht</p>
<div class="editor" role="textbox" aria-multiline="true" contenteditable="true"></div>
<span class="field-title">Lieferort</span>
<div class="city-picker" role="combobox" aria-expanded="false" tabindex="0">Berlin</div>

<!-- Nachher: aria-labelledby verweist jedes Feld auf seine sichtbare Beschriftung -->
<p class="field-title" id="nachricht-label">Ihre Nachricht</p>
<div class="editor" role="textbox" aria-multiline="true" contenteditable="true"
     aria-labelledby="nachricht-label"></div>
<span class="field-title" id="ort-label">Lieferort</span>
<div class="city-picker" role="combobox" aria-expanded="false" tabindex="0"
     aria-labelledby="ort-label">Berlin</div>

Ein Name allein genügt nicht: Eine eigene Combobox braucht außerdem die Tastaturbedienung und die Zustände (aria-expanded, aria-activedescendant), die der ARIA Authoring Practices Guide beschreibt ^[4].

So prüfen Sie es von Hand

1. Wählen Sie jedes eigene Feld im Barrierefreiheits-Inspektor Ihres Browsers (Chrome, Edge, Firefox). Der „Name“ sollte der sichtbaren Beschriftung entsprechen.
2. Gehen Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) per Tab zum Feld: Hören Sie Rolle und Namen, etwa „Lieferort, Kombinationsfeld“?
3. Bedienen Sie das Widget nur mit der Tastatur: Können Sie es öffnen, darin wählen und es schließen? Das deckt keine Namensprüfung ab.
4. Probieren Sie Sprachsteuerung, etwa die Sprachzugriff-Funktion unter Windows oder die Sprachsteuerung unter macOS: Sagen Sie „Klick“ und die sichtbare Beschriftung.

Zugehöriges WCAG-Kriterium

4.1.2 Name, Rolle, Wert, Stufe A: Jedes Bedienelement braucht einen Namen, den assistive Technik lesen kann. Verwandt: 1.3.1 Info und Beziehungen, weil die Verbindung zwischen sichtbarer Beschriftung und Feld im Code stehen muss, und 2.5.3 Beschriftung im Namen – der Name muss die Wörter der sichtbaren Beschriftung enthalten.

So meldet Reviseberg diese Regel

Reviseberg führt aria-input-field-name auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Elemente und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und alle betroffenen Seiten.

Wo axe nicht entscheiden kann – ein <label>, das zum Widget zu gehören scheint, dessen Namen aber nicht erreicht –, landet der Fall in der Warteschlange „Mögliche Probleme“. Dort entscheidet ein Mensch; Reviseberg zählt ihn nicht als bestanden. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.

Verwandte Regeln

• undefined – native Textfelder, Checkboxen und Radiobuttons ohne Namen.
• undefined – native <select>-Auswahllisten ohne Namen.
• undefined – eine Rolle wie combobox oder slider ohne die Attribute, die sie verlangt.
• undefined – ARIA-Attribute mit unzulässigem Wert, etwa aria-expanded="ja".

Eigene Widgets auf Ihrer Website prüfen – kostenloser Scan