Short note on improving usability of scrollable regions

Posted on Wednesday, 3 February 2016 by Steve Faulkner

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.

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. 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 HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. 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?

  2. 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.

  3. 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.

    http://allyjs.io/data-tables/focusable.html#scrollable-elements (1.5MB comparison table)

  4. 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…

Comments for this post are closed.