Given that I am on a screen with
a
scrolling container
1 Keyboard only
WHEN I use the tab key to move focus to the container
I SEE focus is strongly visually indicated
Then when I use the up/down arrow keys
I SEE the content is browsed up/down
2 Desktop screenreader
WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver)
AND
I use the tab key to move focus to the container
I HEARIts purpose is clear
I HEARIt identifies its role as region
Then when I use the up/down arrow keys
I HEARthe content is browsed up/down
3
Mobile screenreader
WHEN I use a screenreader
AND
I swipe move browse to the container
I HEARIts purpose is clear
I HEARIt identifies its role as region
Then when I swipe move browse to the content
I HEARthe content is read
1 Keyboard & screen reader actions
When I use
I see/hear
Tab
Focus visibly moves to container
Arrow keys
Browses the the container
2 Mobile screenreader gestures
When I use
I hear
Swipe
The content is browsed in logical order
3 Screenreader output
Reads
I hear
Name
Its purpose is clear
Role
It identifies its role as region
Do not enable/disable buttons based on scrolling container
Screen readers can read content without changing the scroll offset position in the viewpoint.
If you use a scrolling container for terms & conditions, don’t disable the continue button because someone using a screen reader may not be able to enable the button.
Code examples
Screen reader and browser pairings
Platform
Screenreader
Browser
iOS
VoiceOver
Safari
Android
Talkback
Chrome
Windows
JAWS
Chrome
Windows
NVDA
Chrome
MacOS
VoiceOver
Safari
<divrole="region"aria-label="Screenreader browser pairing table"class="scrolling-container"tabindex="0"><!-- Content goes here --></div>
Developer notes
Name
Use aria-label="Container purpose" to give the container a name and purpose.
Role
Use role="region" to set apart the div as a landmark.
Focus
Use tabindex="0" to make the container element focusable
iOS
Safari
Android
Talkback
Chrome
Windows
JAWS
NVDA