Ensures Every ARIA Input Field Has an Accessible Name
Casandra Visser
Author
Yotam Flohr
Researcher
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
WCAG requires all ARIA input fields to have an accessible name.
Accessible names are essential because they ensure that assistive technology understands the role of input fields. Accessible names must exist for the following input field roles:
combobox
listbox
searchbox
slider
spinbutton
textbox
Developers should ensure that every ARIA input field has an accessible name.
The aria-input-field-label rule includes six markup patterns that pass testing criteria:
<!-- combobox -->
<div id="pass1" aria-label="country" role="combobox">England</div>
<!-- Select a color: -->
<p id="pass2Label">Select a color:</p>
<div id="pass2" role="listbox" aria-labelledby="pass2Label">
<div role="option">Orange</div>
</div>
<!-- searchbox -->
<p id="pass3Label">Search currency pairs:</p>
<div id="pass3"
role="searchbox"
contenteditable="true"
aria-labelledby="pass3Label"></div>
<!-- slider -->
<div id="pass4"
role="slider"
aria-label="Choose a value"
aria-valuemin="1"
aria-valuemax="7"
aria-valuenow="2"></div>
<!-- spinbutton -->
<div id="pass5"
role="spinbutton"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="8"
aria-label="Enter quantity:"></div>
<!-- textbox -->
<label id="foo">
foo
<div id="pass6" role="textbox" aria-labelledby="foo"></div>
</label>
Copy
The aria-input-field-label rule includes ten markup patterns that fail testing criteria:
<!-- aria-label with empty text string -->
<div id="fail1" aria-label=" " role="combobox">England</div>
<!-- The label does not exist. -->
<div id="fail2" aria-labelledby="non-existing" role="combobox">England</div>
<!-- The implicit label is not supported on div elements. -->
<label>
first name
<div id="fail3" role="textbox"></div>
</label>
<!-- explicit label not supported on div elements -->
<label for="fail4">first name</label>
<div role="textbox" id="fail4"></div>
<!-- combobox -->
<div id="fail5" role="combobox">England</div>
<!-- listbox -->
<div id="fail6" role="listbox" aria-labelledby="label-does-not-exist">
<div role="option">Orange</div>
</div>
<!-- searchbox -->
<div id="fail7"
role="searchbox"
contenteditable="true"
aria-labelledby="unknown-label"></div>
<!-- slider -->
<div id="fail8"
role="slider"
aria-valuemin="1"
aria-valuemax="7"
aria-valuenow="2"></div>
<!-- spinbutton -->
<div id="fail9"
role="spinbutton"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="8"></div>
<!-- textbox -->
<label>foo
<div id="fail10" role="textbox"></div>
</label>
Copy
For more examples, visit W3C’s GitHub’s ATC Rules library.