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

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

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

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: