Stellt sicher, dass jedes ARIA-Eingabefeld einen zugänglichen Namen hat

Casandra Visser

Autor

Yotam Flohr

Forscher

Ritvik Shrivastava

Experte

Juli 29, 2024

Betroffene Behinderungen: Blind Sehbehindert Hören Mobilität

Standards: WCAG 2.2 Level A

Die WCAG verlangt, dass alle ARIA-Eingabefelder einen zugänglichen Namen haben.

Warum es wichtig ist

Zugängliche Namen sind unerlässlich, da sie sicherstellen, dass unterstützende Technologien die Rolle von Eingabefeldern verstehen. Zugängliche Namen müssen für die folgenden Eingabefeldrollen vorhanden sein:

combobox
listbox
searchbox
slider
spinbutton
textbox

Behebung des Problems

Entwickler sollten sicherstellen, dass jedes ARIA-Eingabefeld einen zugänglichen Namen hat.

Gutes Codebeispiel

Codebeispiel

<!-- Kombinationsfeld -->
<div id="pass1" aria-label="Land" role="combobox">England</div><!-- Wählen Sie eine Farbe: -->
<p id="pass2Label">Wählen Sie eine Farbe:</p>
<div id="pass2" role="listbox" aria-labelledby="pass2Label">
<div role="option">Orange</div>
</div><!-- Suchfeld -->
<p id="pass3Label">Währungspaare suchen:</p>
<div id="pass3" role="searchbox" contenteditable="true" aria-labelledby="pass3Label"></div><!-- Schieberegler -->
<div id="pass4" role="slider" aria-label="Wert auswählen" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2"></div><!-- Spin-Button -->
<div id="pass5" role="spinbutton" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8" aria-label="Menge eingeben:"></div><!-- Textfeld -->
<label id="foo"> foo
<div id="pass6" role="textbox" aria-labelledby="foo"></div>
</label>

Kopieren

Schlechtes Codebeispiel

Codebeispiel

<!-- aria-label mit leerem Textstring -->
<div id="fail1" aria-label=" " role="combobox">England</div><!-- Das Label existiert nicht. -->
<div id="fail2" aria-labelledby="nicht-vorhanden" role="combobox">England</div><!-- Das implizite Label wird auf div-Elementen nicht unterstützt. -->
<label> Vorname
<div id="fail3" role="textbox"></div>
</label><!-- Explizites Label wird auf div-Elementen nicht unterstützt. -->
<label for="fail4">Nachname</label>
<div id="fail4" role="textbox"></div>

Kopieren

Testfälle

Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.