‘Name, Role, Value’ requires that the name and role of user components can be understood by technology.
Introduction
Users who rely on assistive technology, such as a screen reader or magnifier, rely on their technology being able to correctly understand and interact with the components of your website.
For the most part, using standard controls such as those in HTML enables most technologies to interpret and control your website. However, if you have built custom controls, it’s essential they can still be processed by assistive technology.
How to Pass ‘Name, Role, Value’
- Ensure every component of your website has a name, role or label (this can be visible or hidden).
- Where a component has a value (for example a radio button can be selected or unselected), the value can be determined by technology.
‘Name, Role, Value’ Tips
A common value is whether an element has focus or not at a given time, and whether that state has changed.
Elements to pay keen attention to include forms and links.
Remember, standard HTML will almost always pass 4.1.2 – Name, Role, Value without further work.
Be wary of third-party plugins or code and make sure these meet the criteria.
Run your website through a HTML validator to spot any minor coding issues to fix.
See Also
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.