Name, Role, Value - Success Criterion 4.1.2 (Level A)

Question

If your site or application includes customized interface components, do they have appropriate name, role, and value?

Why is this important?

Standard user interface controls are accessible to assistive technologies (AT) such as screen readers, screen magnifiers, and speech recognition software. Custom controls may not function properly if they lack the appropriate name, role, or value associated with the element. This makes it difficult or even impossible for users to interact with the content.

Whom does it benefit?

Example 1

As a person with a mobility impairment using keyboard navigation,
I want to identify the items that have keyboard focus
so that I can quickly find and activate the submit button.

Example 2

As a person with a visual impairment,
I want my screen reader to notify me when a box on a survey has been checked
so that I can be sure my selection is recorded correctly before I submit it.

What should you do?

Whenever possible, use standard HTML controls that include name, role, and value information.
If using custom controls, make sure to apply appropriate name, role, and value.

How do you do it?

Use standard controls whenever possible.

If customizing controls, be sure to use appropriate WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) techniques so that necessary information is made available to assistive technology ensuring that:

every control has a name or label
role of each control e.g. pulldown menu, link, radio button is identified
the state of each control is visible and announced
notifications about changes of focus are made, such as:
- whether or not the control has focus
- whether or not a control option is selected
- the option that was selected, such as a checkbox, radio button, or if a collapsible list is expanded or collapsed.