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