Skip to main content
No Result Found

keyboard-accessible-role

Ensures that UI elements are focusable and accessible using a keyboard.

Severity: Serious

Description

UI elements needing user inputs should be focusable and accessible using a keyboard. Custom UI elements created using the role attribute might not be focusable, making them inaccessible by a keyboard. The keyboard-accessible-role rule ensures that UI elements can be accessed using a keyboard.

Success criteria

For this accessibility check to pass, your page must meet the following criteria:

  • It uses the tabindex="0" attribute along with all usages of the role attribute in a UI element.

Why is it important?

If UI elements are not focusable, people can’t access them using a keyboard.

Consider the following image:

Focus jumps from 'Button 1' to 'Button 3', skipping 'Button 2'.

The code for the above three buttons looks as follows:

Initial Sample with all types
Copy icon Copy

Here, the focus using the tab key jumps from ‘Button 1’ to ‘Button 3’, skipping ‘Button 2’. This makes Button 2 inaccessible to users who cannot use a pointing device. Users of assistive technologies, such as screen readers, will also find it difficult to navigate such web pages. Therefore, it is essential to ensure that all UI elements that need user inputs on a webpage are accessible via keyboard.

Example

The following example uses the proper semantic element button to declare a UI element. It doesn’t use the role attribute. By default, this is accessible as the button element is focussable. Hence, this code snippet doesn’t break the keyboard-accessible-role rule.

Correct sample with semantic element
Copy icon Copy

In contrast, the following example uses the role attribute to declare a button. It also doesn’t use the tabindex="0" attribute associated with it, which makes the button not focusable using a keyboard. This type of declaration of UI elements breaks the keyboard-accessible-role rule.

Incorrect sample - role attribute with no tabindex
Copy icon Copy

Consider the following example in which the role attribute is used to declare a link element. It also doesn’t use the tabindex="0" attribute associated with it, which makes the link non-focusable using a keyboard. This in turn breaks the keyboard-accessible-role rule.

Incorrect sample - no tabindex
Copy icon Copy

In contrast, the following code snippet uses the tabindex="0" attribute along with the role attribute. Hence, the link is focusable using a keyboard. So, this code snippet does not break the keyboard-accessible-role rule.

Correct sample with tabindex
Copy icon Copy

These examples are only for demonstration and may not present an optimal HTML implementation.

How to fix?

  • Use semantic UI elements as much as possible instead of div or span.
  • If non-semantic elements are declared inside div or span using the role attribute, add a tabindex ="0" attribute to make it accessible.
  • If you intentionally don’t want the UI element created using the role attribute to get keyboard focus, add tabindex = "-1".

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle