ARIA input fields must have an accessible name

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>