You can make an element scrollable using CSS overflow property, problem is that typically the content cannot be scrolled using the keyboard.
The
overflowproperty specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.
Making a scrollable region operable for keyboard users is pretty simple. Add tabindex="0". The region will now be included in the focus order and when focused the keyboard user can scroll through the content.
Identifying and labelling it for screen reader users is also pretty simple. Add an appropriate role and label to the region using the ARIA role attribute and aria-label attribute. By doing so, screen reader users will get an undertsanding of what this focusable item is and what content it contains.
It’s also a very good idea to provide a clear indication of focus on the scrollable region so keyboard users know where they are.
Demonstration scrollable region
See the Pen scrollable region demo by steve faulkner (@stevef) on CodePen.
Thanks to my friend and colleague Ashley Bischoff, for the code and inspiration.
Comments
Hi Steve,
Some of us find the scrolling content a trigger for nausea, migraine, and – it’s not too far to presume – seizure. So, this is a great step toward a better experience for us.
Is there a way to do something similar for scrollies on mobile? With both accessibility enabled and disabled? Something I imagine as flick assisted scrolling?
I can get it scrolling up and down on my iPhone 5 v8.4.4, but not sideways. Does horizontal scrolling have the same fixes?
horizontal scroll is not apparent in the demo because the width of the content in the region does not overflow the region width. If you reduced the specified width of the region a horizontal scrollbar would be displayed.
Adding tabindex=”0″ makes the scrollable container explicitly keyboard focusable in every browser. However, this may already be done implicitly by the browser itself.
Firefox makes any block-level element with appropriate CSS overflow property value keyboard focusable. Internet Explorer makes any overflowing focusable (as if tabindex=”-1″ was specified). Edge, Chrome and Safari don’t do anything on their own.
https://allyjs.io/data-tables/focusable.html#scrollable-elements (1.5MB comparison table)
What about scrollable regions with focusable content inside them? Are we doomed to have to perform tabindex trickery with JavaScript?
unless i’m missing something, browsers would normally scroll the region automatically to make the focused element inside it visible. the tabindex trick outlined here only applies to actually allowing keyboard users to freely scroll the content…
Hi Rodney, right so testing in firefox with explicit tabindex removed, the region is still scrollable o/. But In IE, Edge, Chrome on windows it is not.
@rodney have filed bugs on edge and chrome.