Scrollable Region Focusable
Critical - WCAG Level A
The issue at hand is that scrollable regions on a webpage are not accessible via keyboard navigation. This is a significant problem for users who rely on keyboards, such as individuals with motor disabilities or those using assistive technologies like screen readers. If a scrollable region cannot be focused or navigated using a keyboard, these users may miss out on important content or functionality.
To fix this issue:
Ensure that scrollable regions can be focused using the keyboard. This typically involves setting the
tabindexattribute to "0" on the scrollable container, which makes it focusable.Once focusable, users can interact with the region using keyboard controls such as the arrow keys to scroll through the content.
Additionally, it is important to ensure that the scrollable region has a clear visual focus indicator.
This can be achieved using CSS to style the
:focusstate of the element, providing a visible outline or background change.
Best practices:
Include ensuring that the content within the scrollable region is accessible and that any interactive elements inside are also keyboard navigable.
Avoid using
tabindexvalues greater than "0" as they can disrupt the natural tab order of the page.
Common mistakes:Setting
tabindexto a negative value, which makes the element unfocusableFailing to provide a visual indication of focus, which can confuse users who rely on visual cues to navigate the page.