Scrollable region must have keyboard access

Rule ID: scrollable-region-focusable
Ruleset: axe-core 4.8
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

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)
  • WCAG 2.2 (A)
  • Trusted Tester
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 2.1.1: MUST: Keyboard

WCAG Success Criteria [WCAG 2.0 (A)]

  • 2.1.1: MUST: Keyboard

WCAG Success Criteria [WCAG 2.2 (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.8 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: