Level A
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.>
Explanation
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.
Roles
- Development
- QA
Requirements
- 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, andtabpanelroles; - An
<a>element has been used as the basis for a button, but the ARIAbuttonrole has not been applied; - A button is used as the trigger to disclose content, but the
aria-expandedattribute 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).