scrollable-region-focusable
Scrollable regions with no focusable content should be keyboard-focusable
Flags elements whose CSS declares overflow:auto/scroll, contain no focusable descendant, and are not themselves keyboard-focusable, for manual review of whether their content actually overflows and needs keyboard scroll access.
Applies to. Scoped on purpose to a fixed set of likely-to-scroll container tags (div, section, article, aside, main, nav, pre, table, blockquote, ul, ol, textarea) with computed overflow-x/overflow-y of auto or scroll, not every element on the page, to keep this deterministic and performant (same style of scope-down as region). Finding nothing to ask about, it reports notApplicable, not pass: it applies only to what its check flags, and finding nothing there doesn't show that all is well.
Expectation. A region whose CSS declares it may scroll (auto/scroll) should be reachable by keyboard: either it already contains a descendant in the sequential tab order (a link, button, form control, or element with a non-negative tabindex that a keyboard user could tab into and then use arrow keys to scroll from; one with tabindex="-1", a disabled or type="hidden" control, or one the page hides does not count), or the region itself is reached by Tab: a non-negative tabindex, or natively, as a <textarea> or an editable region is. A disabled <textarea> is left out, as a disabled field need not be operable.
Examples
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY">Plain long text content with no interactive children at all.</div>
The region can scroll, but it has no tabindex of its own and contains no focusable descendant, so a keyboard user can never reach it to scroll it.
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY" tabindex="0">Long content, but the region itself is focusable.</div>
tabindex="0" makes the scrollable region itself reachable by keyboard.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
SCROLLABLE_OVERFLOW_NOT_FOCUSABLE
- Find the element the report names and check, at the sizes the page is used at, whether its content overflows (a scrollbar appears or content is cut off).
- If it does not overflow, it passes.
- If it does, click just before it and press Tab until focus reaches it.
- With focus on it, press the arrow keys, Page Down and Space, and check that the content scrolls.
- If the region itself can't be scrolled with the keyboard, the page may offer another way to see what is hidden, such as previous and next buttons on a carousel. It only counts if you can use it with the keyboard alone and it brings every hidden item into view.
Pass. The element does not overflow, or everything hidden in it can be brought into view with the keyboard alone, by scrolling it or by another way the page offers.
Fail. Some hidden content can only be brought into view with a mouse or touch, which fails WCAG 2.1.1.