This document gives information about the related accessibility checks:

• Scrollable content can be reached with sequential focus navigation.

What

It must be possible to focus on scrollable content using the keyboard, either by focusing on the scrollable element itself or one of its descendant elements. This means that either the scrollable element or one of its child elements should be included in the sequential focus navigation.

Scrollable content refers to areas on a webpage where users can scroll through more information than what is visible on the screen at once. This might be a long list, a text box, or a section with many items. For example, a chat window is scrollable because it shows a list of messages, but you can scroll up or down to see more messages.

Why

If scrollable content cannot be focused on by using the keyboard, users such as those with mobility impairments, and who cannot use a mouse to scroll with, are unable to access the part of your content that is not in view.

Affected users

This check affects the following users who have:

• Mobility impairments: Who navigate the page with a keyboard or alternative input device.

User story

Sandra is 38 years old. At the age of 16, her life took an unexpected turn during a sports accident on the basketball court. While attempting a daring dunk, she landed in an awkward manner, resulting in a spinal cord injury. Unfortunately, this event left her paralyzed from the waist down.

"You know, I cannot stand it when those scroll things do not work with my dictation software. Like, when I am trying to look at an online map to see where my clients live. They have those scroll bars you are supposed to drag with the mouse, right? When it works with my software, I can just say ‘press right arrow,’ and it scrolls over no problem. But when it does not work, I am totally stuck. I mean, I have still got some movement in my right hand, and I can move the mouse, but doing that whole precise scroll motion — holding down the button while moving the mouse just right — it is just not something I can pull off."

Examples

This section gives some examples of the issue.

Example –scrollable & focusable section

This scrollable section is part of the focus navigation because it has a tabindex attribute set to 0. This means keyboard users can also scroll through the content.

<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
<h1>WCAG 2.1 Abstract</h1>
<p>
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
and cognitive limitations; but will not address every user need for people with these disabilities.
</p>
</section>

Example – scrollable & non-focusable section

This vertically scrollable section is not part of the sequence that users can navigate through with their keyboard, and none of its inner elements are either. Because of this, keyboard users can't scroll, and they might not be able to see the content that isn't currently visible on the screen.

<section style="height: 100px; width: 500px; overflow-y: scroll">
<h1>WCAG 2.1 Abstract</h1>
<p>
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
and cognitive limitations; but will not address every user need for people with these disabilities.
</p>
</section>

How

How to fix it

The Web Governance platform highlights elements that are scrollable but which are not part of the sequential focus navigation, or that do not have descendants included in the sequential focus navigation.

To fix the issue, adjust the HTML code so that the scrollable elements can be focused. Alternatively, make sure the scrollable element contains another focusable element, such as a link.

Use tabindex="0" to make container elements like a <div> or <section> focusable.

See the section "ACT rules" below for a detailed description of this check.

Additional resources

WCAG success criteria

2.1.3 Keyboard (No Exception)

ACT rules

Related accessibility conformance testing rules:

Scrollable content can be reached with sequential focus navigation