Scrollable region must have keyboard access

Rule ID: scrollable-region-focusable
Ruleset: axe-core 4.7
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), Trusted Tester

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • Trusted Tester

WCAG Success Criteria [WCAG 2.1 (A)]

  • 2.1.1: MUST: Keyboard

WCAG Success Criteria [WCAG 2.0 (A)]

  • 2.1.1: MUST: Keyboard

Trusted Tester Guidelines

  • 4.A: MUST: All functionality can be accessed and executed using only the keyboard.

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.7 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: