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

Question

Does your site or application deviate from using standard HTML controls according to the specification? If so, are you ensuring that the name, role and value of any developed custom controls or scripted interface element can be determined and controlled by assistive technology?

Why is this important

User interface controls used according to standard web specifications are accessible to assistive technologies (AT) such as screen readers, screen magnifiers, and speech recognition software. Custom designed controls however, may not provide important information or function properly making it difficult or even impossible for users of AT to interact with the content.

Whom does it benefit?

Example 1:

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.

Example 2:

As a person with a mobility impairment who relies on keyboard navigation,
I want to know if the keyboard focus changes to a new button or control (particularly a custom component) on the page
so that I can more accurately complete online forms.

What should you do?

  • Whenever possible, use standard HTML controls that include name, role, state, and value information. Interface elements should be used according to specification.
  • If custom controls are created, or interface elements are programmed (in code or script) to have a different role and/or function than usual, use additional measures to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies.

How do you do it?

When using standard controls do not deviate from web specifications.

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

  • every control has a name or label;
  • the role of each control (e.g. pulldown menu, link, radio button, etc.) is identified;
  • the state of each control is visible and announced by assistive technology;
  • and notifications about changes of focus are announced to assistive technology, such as
    • whether or not the control has focus
    • whether or not a control option is selected
    • which option is selected, such as a checkbox, radio button, or if a collapsible list is expanded or collapsed

Need technical guidance?

Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 4.1.2 - Name, Role, Value page.

Additional Resources to help you: