4.1.2 Name, Role, Value (A)
Understanding 4.1.2 Name, Role, Value (A)
All interactive components must have an accessible name and role, and the state of the component must be communicated to assistive technologies. This ensures that screen reader users understand the purpose (role) of every component, how to identify it (name), and what state it is in.
Requirements / What to do?
- All interactive elements and components have an accessible name;
- All interactive elements and components have a role (either implicit or explicit);
- All interactive elements and components communicate information about their state.
Common mistakes
- An
<a>
or<button>
element contains no text content, and so has no accessible name; - A form field has no associated
<label>
element, and so has no accessible name; - A set of tabs is created using
<ul>
,<li>
, and<a>
elements, but ARIA has not been used to provide thetablist
,tab
, andtabpanel
roles; - An
<a>
element has been used as the basis for a button, but the ARIAbutton
role has not been applied; - A button is used as the trigger to disclose content, but the
aria-expanded
attribute has not been used to communicate the disclosure component’s current state; - A
<div>
or<span>
has been used as the basis for an interactive component, but ARIA has not been used to identify the purpose of the component (or its constituent parts).