---
title: Scrollable Region Keyboard Access | Accessibility Rule
description: Scrollable region must have keyboard access
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/scrollable-region-focusable
  md: https://testingbot.com/support/accessibility/web/rules/scrollable-region-focusable/index.md
---
# Ensure elements that have scrollable content are accessible by keyboard

Rule ID: scrollable-region-focusableUser Impact: seriousGuidelines: WCAG 2.0

Elements with scrollable content must be accessible via keyboard to ensure all users can navigate and interact with the content effectively.

## About This Rule

This guideline ensures that elements with scrollable content are accessible via keyboard, aligning with accessibility standards such as WCAG 2.1 (A) and WCAG 2.0 (A). :contentReference[oaicite:1]{index=1}

## Why It Matters

Keyboard-only users, including individuals with visual or mobility impairments, rely on keyboard navigation to access web content. If scrollable regions cannot receive keyboard focus, these users may be unable to read or interact with the content within those regions, leading to significant accessibility barriers. :contentReference[oaicite:0]{index=0}

## How to Fix

To make scrollable regions keyboard accessible:

- **Add `tabindex="0"` to the Scrollable Container:** This allows the container to receive keyboard focus. 

    <div style="height: 200px; overflow-y: auto;" tabindex="0">
      <!-- Scrollable content here -->
    </div>

- **Ensure Focusable Elements Within the Scrollable Region:** If the scrollable region contains interactive elements, make sure they are focusable and included in the tab order. 

    <div style="height: 200px; overflow-y: auto;">
      <input type="text" />
      <button>Click Me</button>
      <!-- Other focusable content -->
    </div>

- **Avoid Setting `tabindex="-1"` on Focusable Elements:** This removes elements from the tab order, making them inaccessible via keyboard navigation. 

    <!-- Incorrect -->
    <div style="height: 200px; overflow-y: auto;">
      <input type="text" tabindex="-1" />
      <button tabindex="-1">Click Me</button>
      <!-- Other content -->
    </div>

### Examples

#### Incorrect

A scrollable `<div>` without focusable elements or `tabindex`:

    <div style="height: 200px; overflow-y: auto;">
      <p>Non-focusable content</p>
      <p>More content</p>
    </div>

#### Correct

A scrollable `<div>` with `tabindex="0"`:

    <div style="height: 200px; overflow-y: auto;" tabindex="0">
      <p>Non-focusable content</p>
      <p>More content</p>
    </div>

## More Information

- [Understanding Success Criterion 2.1.1: Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [select-name](https://testingbot.com/support/accessibility/web/rules/select-name)
- [server-side-image-map](https://testingbot.com/support/accessibility/web/rules/server-side-image-map)
- [summary-name](https://testingbot.com/support/accessibility/web/rules/summary-name)
- [svg-img-alt](https://testingbot.com/support/accessibility/web/rules/svg-img-alt)
- [td-headers-attr](https://testingbot.com/support/accessibility/web/rules/td-headers-attr)