Rule ID: ace-nav-scroll-focusable

Confirm that scrollable content areas can be reached and navigated using keyboard controls

WCAG 2.0 (A) - WCAG 2.2 (A) 2.1.1: Keyboard 2.1.3: Keyboard (No Exception) Blind Deafblind Mobility User Impact

What This Rule Checks

For users who rely on keyboards or assistive technologies to navigate websites, it is crucial that scrollable regions (such as sections with content that overflows and requires scrolling) can receive focus. If a scrollable region is not focusable, users with motor disabilities or those using keyboard navigation might not be able to interact with the content.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Scrollable content areas that cannot receive keyboard focus trap content behind a barrier for keyboard-only users. They can see the content but cannot scroll to read the rest of it without a mouse.

How to Fix

Ensure that any scrollable region has a tabindex attribute set to 0 or a positive value to make it focusable.
Avoid using negative tabindex values on regions that should be interactable or scrollable.
If scrolling interaction is not needed, consider disabling scrolling or removing the overflow property.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Scrollable content not keyboard accessible -->
<div style="overflow: auto; height: 200px;">
  <p>Long content that requires scrolling...</p>
</div>

Copy

Correct Markup Solutions:

Code example

<!-- Scrollable region with keyboard access -->
<div
  style="overflow: auto; height: 200px;"
  tabindex="0"
  role="region"
  aria-label="Terms and conditions">
  <p>Long content that requires scrolling...</p>
</div>

Copy

Common Mistakes to Avoid

Creating scrollable containers without tabindex=”0″.
Adding tabindex but forgetting role and aria-label for context.
Using scrollable regions for code blocks without keyboard scroll support.

Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.

Related WCAG Criteria

2.1.1: Keyboard
2.1.3: Keyboard (No Exception)