What does this accessibility issue mean?
Accessibility issue summary: Scrollable content areas are not accessible through keyboard operability
Any scrollable elements on your web page should be accessible via sequential focus navigation so users who rely on keyboard operability to navigate the web can access the scrollable content areas.
Solution:
Ensure elements that have scrollable content are accessible by keyboard. Scrollable content is keyboard-accessible only if the scrollable region itself can be focused or if it contains a focusable element.
Example HTML violation: Inaccessible scrollable content (WCAG Level A Issue)
<style>
.scrollable-container {
width: 300px;
height: 200px;
overflow: auto;
}
</style>
<h1>Inaccessible Scrollable Content Example</h1>
<div class="scrollable-container" role="region" aria-label="Scrollable Content">
This is some scrollable content. It can be accessed using the scroll bar. Make sure to provide proper accessibility attributes.
Scroll down to see more content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nunc id aliquam tincidunt, nunc nunc tincidunt nunc, id tincidunt nunc nunc id. Sed auctor, nunc id aliquam tincidunt, nunc nunc tincidunt nunc, id tincidunt nunc nunc id.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
Scrollable content should always have a visible scroll bar and appropriate accessibility attributes.
</div>The code snippet above fails the scrollable-region-focusable rule. This rule checks whether large, scrollable regions can be fired with the keyboard, as keyboard users, unlike mouse users, cannot interact with scrollbars directly.
How to fix "Inaccessible scrollable content (WCAG Level A Issue)" issue
<style>
.scrollable-container {
width: 300px;
height: 200px;
overflow: auto;
}
</style> <h1>Accessible Scrollable Content Example</h1>
<div class="scrollable-container" tabindex="0" role="region" aria-label="Scrollable Content"> This is some scrollable content.
<!-- other content lines... -->
</div>In the revised HTML, I added tabindex="0" to the <div> element with the scrollable-container class.
This makes it focusable, conforming to Success Criterion 2.1.1 Keyboard of the Web Content Accessibility Guidelines (WCAG) 2.1.
Adding tabindex="0" ensures that:
- The scrollable container can receive keyboard focus, and
- The order of the element in the navigation sequence is based on the element's position in the DOM tree, not the
tabindexvalue.
Once focused, users can then use the arrow keys to scroll the content.
So, remember:
To make each scrollable section accessible, ensure that it either receives focus itself or contains a focusable element.
Scrollable content is keyboard-accessible only if the scrollable region itself can be focused or if it contains a focusable element.
