Ensure that scrollable region has keyboard access

Rule ID: scrollable-region-focusable
Ruleset: axe-core 4.4
User Impact: Moderate
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)
 

Squash more accessibility bugs with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Moderate
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

WCAG Success Criteria [WCAG 2.1 (A)]

  • 2.4.7: MUST: Focus Visible

WCAG Success Criteria [WCAG 2.0 (A)]

  • 2.4.7: MUST: Focus Visible

How to Fix the Problem

Correct markup solutions

The key to getting a scrollable region to be accessible with the keyboard is to ensure that a keyboard-only user can focus the scrollable region itself or a static text item within the scrollable region. The first example below shows the first technique and the second one shows the second technique. 


<div id="pass1" style="height: 200px; overflow-y: auto" tabindex="0">
    <div style="height: 2000px">
        <p>Content</p>
    </div>
</div>

<div id="pass2" style="height: 20px; overflow: auto;">
    <input type="text" tabindex="-1" />
    <select tabindex="-1"></select>
    <textarea tabindex="-1"></textarea>
    <p style="height: 200px;" tabindex="0"></p>
</div>

Conditional solution

The following examples could fail if the browser intercepts the keyboard events for autocomplete. It is better to always put a tabindex of 0 on the scrollable region or a static element within the region. 


    <div id="conditional1" style="overflow-y: scroll; height: 5px;">
    <input type="text" />
</div>

Incorrect markup

The following two examples fail because there is no focusable element within the scrollable region. 

<div id="fail1" style="height: 5px; overflow: auto;">
	<input type="text" tabindex="-1" /></div>

<div id="fail2" style="height: 5px; overflow: auto;">
	<input type="text" tabindex="-1" />
	<select tabindex="-1"></select>
	<textarea tabindex="-1"></textarea></div>

Why it Matters

Checks scrollable content for focusable elements enabling keyboard navigation. Keyboard navigation should not fail when focus moves to an element within a scrollable region.

Rule Description

Elements that have scrollable content should be accessible by keyboard

The Algorithm (in simple terms)

Ensure that scrollable region has keyboard access.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.4 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: