Back to Info and Examples for Accessibility Insights for Web
scrollable-region-focusable
Elements with scrollable content must be accessible by keyboard.
Why it matters
When a page includes content in a scrollable element, all users must be able to scroll any hidden content into view. Mouse users can scroll such content by clicking the scrollbar associated with the scrollable element. However, it isn’t possible activate a scrollbar using a keyboard, because a scrollbar can’t receive input focus. Instead, focus must be moved either to the scrollable element itself or to a child element within the scrollable element. Then the content can be scrolled using the keyboard’s arrow keys. Thus, scrollable content is keyboard accessible only if the scrollable element is focusable or contains a focusable element. (An element is focusable if it can receive input focus via scripting, mousing, or keyboard tabbing.)
How to fix
For each element with the overflow property set to auto or scroll , make sure the element itself is focusable or contains a focusable element.
- Some scrollable elements (such as
<input type="text">are natively focusable. - Elements that are not natively focusable (such as
<div>elements) can be made focusable by adding the attributetabindex="0".
Example
Fail
<div> is scrollable, but neither the <div> itself nor any of its content is tabbable.
As a result, keyboard users can't operate the scrollbar to see all of the content.<h3>Severability</h3>
<div style="height: 50px; overflow: auto;">If any provision of these terms is found to be unenforceable or invalid under any applicable law, such unenforceability or invalidity shall not render these terms unenforceable or invalid as a whole, and such provisions shall be deleted without affecting the remaining provisions herein.</div>
Pass
tabindex="0" makes the <div> tabbable.
Keyboard users can tab to the <div> and then use operate the scrollbar by using arrow keys.<h3>Severability</h3>
<div style="height: 50px; overflow: auto;" tabindex="0">If any provision of these terms is found to be unenforceable or invalid under any applicable law, such unenforceability or invalidity shall not render these terms unenforceable or invalid as a whole, and such provisions shall be deleted without affecting the remaining provisions herein.</div>
About this rule
This rule passes if ANY of the following is true:
- Scrollable element is focusable
- Scrollable element contains focusable elements