Skip to main content
All CollectionsAccessibility HelpBasics
Scrollable Regions must have Keyboard Access
Scrollable Regions must have Keyboard Access
Updated this week

What is scrollable content?

Scrollable content refers to content on a webpage that is too large to fit in its given area, resulting in the appearance of scroll bars to navigate the content.

What is keyboard access?

Keyboard access refers to a situation when a user is only using a keyboard to access and navigate your site.

In other words, as users tab through the content on your page, they must be able to either focus directly on the scrollable region or on a static text element within it.

Keyboard navigation should continue smoothly when the focus moves to an element within a scrollable area.

Make an Element Focusable

If you have an element (div, p, etc.) with a Failure Summary containing 'Element should be focusable', add a tabindex="0" to the element's attributes to make it focusable.

<div class="widget" tabindex="0">

It is a best practice to always put a tabindex="0" on either:

  • the scrollable region OR

  • a static element within the region.

Element Should have Focusable Content

Focusable content refers to content that can be selected or activated by the user, usually through keyboard navigation (like pressing the tab key) or mouse interaction.

This occurs when an HTML element or any part of one is determined by the user agent to be a focusable area, for example:

  • links

  • form fields

To remedy this issue, add tabindex="0" to the element mentioned in the Element Source.

Example of Element Source shown in an error in DubBot page view.

Common Issues

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?