Scrolling container

How to test a scrolling container

Gherkin Condensed

Given that I am on a page with a scrolling container

1 Keyboard for mobile & desktop

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 HEAR Its purpose is clear
- I HEAR It identifies its role as region
Then when I use the up/down arrow keys I HEAR the content is browsed up/down

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe move browse to the container
- I HEAR Its purpose is clear
- I HEAR It identifies its role as region
Then when I swipe move browse to the content I HEAR the 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 for all devices

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

<div role="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
Focus must be visible