ARIA input fields must have an accessible name
How to Fix the Problem
Correct markup solutions
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>
Incorrect markup solutions
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>
Why it Matters
This new rule ensures every ARIA input field has an accessible name. Accessible names must exist for the following input field roles:
- combobox
- listbox
- searchbox
- slider
- spinbutton
- textbox
Rule Description
Ensures every ARIA input field has an accessible name.
The Algorithm (in simple terms)
ARIA input fields must have an accessible name.