Ensure elements that have scrollable content are accessible by keyboard

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