Scrollable Element Check

Description

The “Scrollable Element Check” evaluates whether all scrollable elements on the page are accessible via the keyboard.

Example outcome

I noticed that all scrollable elements are keyboard accessible.

Impact

• Visual Impairments: Screen reader users rely on keyboard navigation to interact with content. If scrollable areas can’t be accessed, important content may be hidden.
• Motor Impairments: Users with limited or no ability to use a mouse can’t access content if it’s not reachable via keyboard.

Fixes

To address scrollable elements that are not keyboard accessible:

1. Locate the inappropriate scrollable element.
2. Ensure it is keyboard focusable (i.e., use tabindex="0" if it is not naturally focusable).
3. If possible, use a native HTML element that is naturally focuable and scrollable.

Resources

• WCAG 2.2: Understanding Success Criteria 2.1.1
• WCAG 2.2 Techniques: Technique G202: Ensuring keyboard control for all functionality
• WebAIM: Keyboard Accessibility