From Chrome 130, scrollers are keyboard focusable by default if they have no
keyboard focusable children.
> [!NOTE]
> **Note:** To improve performance, this feature has been pushed back to Chrome 132.
## Background
Scrollers are everywhere. You might find one in a "Terms and Conditions" box,
where you need to scroll all the way down to click the submit button. Or, you
might encounter a vertical menu bar full of icons to choose from.
In such cases, many web users use the up down motions from their mouse or
touchpad to scroll across the element. However, a pointing device, trackpad, or
touchscreen is not every user's optimal way to navigate a page. Some people
prefer to navigate across an HTML page accessing every focusable element using
only their keyboard. This can be for a variety of reasons. From people who have
tremors or other issues that make it difficult to operate a mouse, those who
have difficulty visually locating the mouse cursor, and others who use a single
switch or voice control.
Accessibility best practices recommend that all features must be available using
a keyboard. This way, everyone can use the web in the way that works best
for them.
> [2.1.1](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#keyboard-operation-keyboard-operable)
> Keyboard: All
> [functionality](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html#functiondef)
> of the content is operable through a
> [keyboard interface](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html#keybrd-interfacedef)
> without requiring specific timings for individual keystrokes, except where the
> underlying function requires input that depends on the path of the user's
> movement and not just the endpoints. (Level A)
> [!TIP]
> **Tip:** Learn more about [keyboard focus](https://web.dev/learn/accessibility/focus) in our Learn Accessibility course.
## Before this change to focus in scrollers
Prior to this change, a scroller element can only be tab focused if the tabindex
is explicitly set to 0 or higher. For example, use the following CSS and HTML.
Then, try to tab from the first button to the scroller element.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
This is a tab focusable scroller...
You need to scroll down to see this line.
The scroller is focusable due to a positive tabindex.
Using a negative tabindex as in the following HTML, the scroller will be
skipped.
This is not a tab focusable scroller...
You cannot see this line using the keyboard.
The scroller is skipped due to a negative tabindex.
If you don't set a tabindex value, it can be difficult for the user to use
sequential focus navigation to access the scroller. This can be very frustrating
for users who don't have access to a mouse.
This scroller does not have a tabindex value set...
You cannot see this line using the keyboard.
The scroller has no tabindex.
Note that a scroller that contains focusable children, as in the following HTML,
is already accessible, since the arrow keys will allow scrolling when the
focusable children are focused. No behavior is being changed in this case.
This is a terms and conditions text. Please scroll down to acknowledge reading.
The scroller is focusable due to containing focusable children.
## From Chrome 130 with focusable scrollers
This feature allows scrollers without tabindex value set and without any
focusable children to be keyboard focusable. This allows users who cannot or
choose not to use a mouse to focus content using a keyboard's tab and arrow
keys.
This scroller does not have a tabindex value set...
but you can scroll through its content!
The scroller has no tabindex or focusable children yet is still focusable.
Note that this behavior only happens if the scroller has no focusable children.
For example, if the scroller already contains a button, then the tab focus will
skip the scroller and focus on the button directly. In this case, the scroller
content can already be accessed using the arrow keys, once the button is
focused. Due to this rule, the default might not always behave in the most
optimal way if such children exist. If you want the scroller element itself to
be keyboard focusable in this situation, it is recommended to set a tabindex
value of 0 or higher.
This is a terms and conditions text. Please scroll down to acknowledge reading.
The scroller has a tabindex of 0.
This feature allows scrollers to be keyboard accessible by default in all cases,
which will help web users have a smoother experience when tab navigating across
a page.