The interactive elements in each web page should clearly communicate their names, role and values programmatically. This ensures that Assistive Technologies (AT) can gather information, activate or deactivate and update the status of the interactive element to the user.
Table of Contents
Official Requirements
Success Criterion 4.1.2 Name, Role, Value (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.
Why is it required?
When websites use native HTML elements, the AT is able to determine name, role and value by default. However, in the case of custom widgets that is not the case and will cause problems to people using AT to access the website.
How do we fix it?
- Ensure that all interactive elements have name, role and values that can be programmatically determined.
- Avoid using custom widgets and use native HTML elements wherever possible.
- Make sure that custom widgets can be accessed by AT including keyboards.
Mistakes to avoid
- Using div or span for user interface control but not defining its role or function.
- Custom controls don’t support accessibility API.
- User interface control not having a programmatically defined name.
- A Multi-part form field are not having a programmatically defined name for each part.
Reference
