This rule applies to any element that is included in the accessibility tree, and that has one of the following semantic roles:
Note: The list of roles is derived by taking all the ARIA 1.1 roles that:
- have a semantic roles that inherits from the abstract
select role, and
- does not have a required context role that itself inherits from one of those roles.
option role is not part of the list of applicable roles, because it does not meet the definition of a User interface component. This means WCAG 2.1 does not require it to have an accessible name.
Each target element has an accessible name that is not only whitespace.
There are currently no assumptions
Certain assistive technologies can be set up to ignore the title attribute, which means that to some users the title attribute will not act as an accessible name.
Note: This rule does not fail 3.3.2 as there are sufficient techniques within 3.3.2 that don't need the elements to have an accessible name. For example "G131: Providing descriptive labels" AND "G162: Positioning labels to maximize predictability of relationships" would be sufficient.
Passed Example 1
Implicit role with implicit label.
Passed Example 2
Implicit role with aria-label
<input aria-label="last name" disabled />
Passed Example 3
Implicit role with explicit label
Passed Example 4
Implicit role with
Passed Example 5
<div aria-label="country" role="combobox" aria-disabled="true">England</div>
Passed Example 6
The accessible name is not only whitespace.
Failed Example 1
No accessible name.
Failed Example 2
Non-focusable element still needs an accessible name.
Failed Example 3
aria-label with empty text string
<div aria-label=" " role="combobox">England</div>
Failed Example 4
The label does not exist.
<div aria-labelledby="non-existing" role="combobox">England</div>
Failed Example 5
The implicit label is not supported on
Failed Example 6
The explicit label is not supported on
<label for="lastname">first name</label>
<div role="textbox" id="lastname"></div>
Failed Example 7
The accessible name is only whitespace.
<label> <input /></label>
Inapplicable Example 1
Hidden to everyone.
<input aria-label="firstname" style="display:none;" />
Inapplicable Example 2
Hidden to assistive technologies.
<input aria-hidden="true" aria-label="firstname" />
Inapplicable Example 3
Role has explicitly been set to something that isn't a form field.
<input role="presentation" />
Inapplicable Example 4
Option inherits from input, but has a required context role of listbox which inherits from select. We should therefore not consider option as applicable.