ARIA input fields must have an accessible name
This new rule ensures every ARIA input field has an accessible name. Accessible names must exist for the following input field roles:
Fixing 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: -->
<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>