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>

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>