Ensures Every ARIA Input Field Has an Accessible Name

Yotam Flohr
Researcher
Blind Low vision Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

WCAG requires all ARIA input fields to have an accessible name.

Why It Matters

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

Fixing the Issue

Developers should ensure that every ARIA input field has an accessible name.

Good Code Example

The aria-input-field-label rule includes six markup patterns that pass testing criteria:

Code example
<!-- 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

Bad Code Example

The aria-input-field-label rule includes ten markup patterns that fail testing criteria:

Code example
<!-- 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

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library