role-required

Ensure that the roles of interactive elements are not missing or incorrect.

Interactive elements should have their roles defined using the role attribute. A proper role helps assistive technologies like screen readers identify the user interactive element properly. When all user interactive elements have a role assigned, users of assistive technologies can interact with your website more easily, and not lose out on important functionality.

For a list of appropriate widgets roles, see ARIA-prescribed widget roles.

Example

In the following example, an interactive element is used but doesn’t define its role.

The following example fixes this issue by defining the role ‘button’ to the interactive element:

How to fix?

Follow these steps to fix any misses in the role-required rule:

• Ensure that a widget role is declared on the element. Add the appropriate role from ARIA-prescribed widget roles.
• If the interactive element is made of multiple interactive elements, add a composite role to the element from the composite widgets specified by ARIA.
• If the interactive element is not supposed to be interacted with, set the role as none or presentation.

Reference

• Using a WAI-ARIA role to expose the role of a user interface component
• Technique G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
• Technique H91: Using HTML form controls and links
• Failure of Success Criterion 4.1.2 due to using a script to make div or span a user interface control in HTML without providing a role for the control