keyboard-accessible-role

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

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:

The code for the above three buttons looks as follows:

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.

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.

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.

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.

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

• WCAG 2.1.1: Keyboard
• WCAG 4.1.2: Name, Role, Value
• WCAG 1.3.3: Sensory Characteristics
• Technique G202: Ensuring keyboard control for all functionality