Scrollable region must have keyboard access

Rule ID: scrollable-region-focusable

Ruleset: axe-core 4.11

User Impact: Serious

Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549, RGAA

Build more accessible websites 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.

Get started for free!

Compliance Data & Impact

User Impact

Disabilities Affected

Blind
Deafblind
Mobility

Standard(s)

WCAG 2.1 (A)
WCAG 2.0 (A)
WCAG 2.2 (A)
Trusted Tester
EN 301 549
RGAA

WCAG Success Criteria [WCAG 2.1 (A)]

2.1.1: MUST: Keyboard
2.1.3: MUST: Keyboard (No Exception)

WCAG Success Criteria [WCAG 2.0 (A)]

2.1.1: MUST: Keyboard
2.1.3: MUST: Keyboard (No Exception)

WCAG Success Criteria [WCAG 2.2 (A)]

2.1.1: MUST: Keyboard
2.1.3: MUST: Keyboard (No Exception)

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

Not all browsers add scrollable elements to the tab focus order. To make scrollable elements accessible by keyboard in Safari, the element either has to be focusable itself, or contain a focusable element within it.

Rule Description

Elements that have scrollable content should be accessible by keyboard in Safari

The Algorithm (in simple terms)

Ensure that scrollable region has keyboard access.

Resources

Deque University Course Pages (subscription required)

SC 2.1.1 Keyboard

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.11 rules.

Was this information helpful?

You have already given your feedback, thank you..