Skip to main content
No Result Found

scrollable-region-focusable

Severity: Serious

Description

All interactive elements in scrollable areas on a webpage must be focusable using a keyboard. Users who can’t use pointing devices are dependent on keyboards to access webpages. If interactive elements in a scrollable region do not get keyboard focus, such elements can’t be accessed by users reliant on keyboards.

The best way to ensure that interactive elements receive keyboard focus is to use tabindex="0".

Example

In the following example, the interactive element “Click Me” is in a scrollable region and it doesn’t receive keyboard focus. Any user dependent on a keyboard can’t access this button. Such inaccessible elements in scrollable regions break the scrollable-region-focusable rule.

Incorrect sample - inaccessible element
Copy icon Copy

In contrast, the following code snippet uses tabindex="0" to make the interactive element “Click Me” keyboard focusable. Users can access this element in a scrollable region with a keyboard. Hence, this code snippet doesn’t break the scrollable-region-focusable rule.

Correct sample with accessible element
Copy icon Copy

How to fix?

If you have interactive elements in scrollable regions of a webpage, follow these steps:

  • Check if the interactive elements have tabindex values. If not, add them.

  • Check if the interactive elements use tabindex="-1". If so, change them to allow keyboard focus.

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