Short note on improving usability of scrollable regions

You can make an element scrollable using CSS overflow property, problem is that typically the content cannot be scrolled using the keyboard.

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

https://developer.mozilla.org/en/docs/Web/CSS/overflow

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.

Categories: Technical

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

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?

Mary Elizabeth Sullivan says:

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?

Steve Faulkner says:

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.

Rodney Rehm says:

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)

Taylor Hunt says:

What about scrollable regions with focusable content inside them? Are we doomed to have to perform tabindex trickery with JavaScript?

Patrick H. Lauke says:

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…

Steve Faulkner says:

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.

Steve Faulkner says:

@rodney have filed bugs on edge and chrome.