Ensures Every ARIA Input Field Has an Accessible Name

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Hearing Mobility

Standards: WCAG 2.2 Level A

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.