Ensure interactive element has accessibility role

(In development)

Ensure the role of interactive elements is indicated to users of assistive technologies. The role is used to determine what happens upon activation. The role is announced to screen reader users.

Impact

People who use assistive technologies depend on a correct role. If an interactive element doesn't indicate it's role, it's not clear what will happen upon activation.

Solutions

Elements

Testing

Automated testing

This issue can be detected automatically with the Abra Test Engine.

Manual testing

Navigate to the element using a screen reader.

The screen reader usually announces the role as last or second last property.

Examples:

  • Button: "Name, Button"
  • Checkbox: "Value, Name, Checkbox"
  • Dropdown: "Value, Name, Dropdown"
  • Input field: "Value, Name, Input field"
  • Link: "Name, Link"
  • Switch: "State, Name, Switch"
  • Tab: "State, Name, Tab, 1 out of 4"

Passes if the role accurately reflects the element type.

Relevant sources

Always check the official guidelines.