Custom ARIA input fields must communicate their complete names to assistive technologies.
Why it matters
Every custom input field must have an accessible name that communicates its specific purpose.
A custom ARIA input field might be based on an element (such as
<div>) that isn't supported by
<label> elements. Browsers will not associate a
<label> element with any element that is not a labelable element in HTML. This is true even if the element's role were to be changed to match the implicit ARIA role of a labelable element. For instance, while an
<input type="text"> is a labelable element, a
<div role="textbox"> is not. As a result, if a
<label> element references an unsupported element, its text will not be used to name the referenced custom input field, and thus will not be exposed available to assistive technologies. If such a
<label> contains a meaningful part of the custom input field's name, people who use assistive technologies won't know its complete name. They might find it difficult to distinguish among elements with similar names.
How to check
Inspect the element using the Accessibility pane in the browser Developer Tools to verify that the field's accessible name is complete without the associated
If the element's accessible name is complete without the associated
<label> text, then no changes are needed.
How to fix
Provide the complete accessible name using ONE of the following methods:
<div> functions as a slider. Part of its name is contained only in a
<label> element. Because
<div> elements aren't supported by
<label> elements, assistive technologies won't have access to, and thus won't announce the
<label> text. Assistive technology users won't know they're being asked for a shirt size.
<div id="field1" role="slider" aria-label="women's">...</div>
aria-labelledby attribute. Everyone will understand what they are selecting.
<div id="field1" role="slider" aria-labelledby=
About this rule
Instances need review if ALL of the following are true:
- Element has one of the following role attribute values:
- Element has an accessible name provided by an
idis referenced by a
- Element's type is not labelable
<label>contains text that isn't included in the element's accessible name