This document provides information about the Acquia Web Governance accessibility check:
Scrollable content is not accessible using the keyboard (no exception).
What
It must be possible to focus on scrollable content through the use of the keyboard, either by placing focus on the scrollable element itself or on 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 keyboard focus cannot be moved to scrollable content, users with mobility impairments as well as anyone who cannot use a mouse to scroll are unable to access portions of the content that are not in view.
Who
Affected users
This check affects the following users who have:
Mobility impairments: Who navigate the page with a keyboard or alternative input device.
No impairments: Who navigate without a mouse.
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 provides some examples of the issue.
Example: Scrollable and 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 and non-focusable section
This vertically scrollable section cannot be accessed through the keyboard navigation sequence. Additionally, its inner elements are not keyboard-accessible. Because of this, keyboard users cannot scroll, and they might miss the content that is not 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
This section provides information about how to identify and fix the issue.
How to identify it
The Aquia Web Governanceplatform 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.
How to fix it
To fix the issue, adjust the HTML code so that the scrollable elements can be focused. Alternatively, ensure that 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 ACT rules section below for a link to a detailed description of this check.
Scrollable content is not accessible using the keyboard (no exception)
2.1.1 Keyboard
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Scrollable content is not accessible using the keyboard (no exception).
What
It must be possible to focus on scrollable content through the use of the keyboard, either by placing focus on the scrollable element itself or on 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 keyboard focus cannot be moved to scrollable content, users with mobility impairments as well as anyone who cannot use a mouse to scroll are unable to access portions of the content that are not in view.
Who
Affected users
This check affects the following users who have:
Mobility impairments: Who navigate the page with a keyboard or alternative input device.
No impairments: Who navigate without a mouse.
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 provides some examples of the issue.
Example: Scrollable and 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 and non-focusable section
This vertically scrollable section cannot be accessed through the keyboard navigation sequence. Additionally, its inner elements are not keyboard-accessible. Because of this, keyboard users cannot scroll, and they might miss the content that is not 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
This section provides information about how to identify and fix the issue.
How to identify it
The Aquia Web Governanceplatform 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.
How to fix it
To fix the issue, adjust the HTML code so that the scrollable elements can be focused. Alternatively, ensure that 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 ACT rules section below for a link to a detailed description of this check.
Web Governance