Ensure interactive element has accessibility state

(In development)

Ensure the state of interactive elements is indicated to users of assistive technologies. For example, a tab should indicate whether it is selected or not. If the state is not indicated, users might get confused.

Impact

People who use assistive technologies depend on a correct state. If an interactive element doesn't indicate it's state, it's not clear how it can be used.

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 state of the element is usually the first property to get announced.

Examples:

  • Selected Tab: "Selected, Name, Tab, 1 out of 4"
  • Enabled Switch: "On, Name, Switch"

Passes if the state accurately reflects the element state.

Relevant sources

Always check the official guidelines.