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.
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
Thanks to my friend and colleague Ashley Bischoff, for the code and inspiration.