Web Governance
Scrollable content is not accessible using the keyboard (no exception)
This check affects the following users who have:
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."
This section provides some examples of the issue.
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.
Web Governance<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>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>The Aquia 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, 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.
Related accessibility conformance testing rules:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.