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
Apple iOS Apple VoiceOver Apple Safari
Android Talkback Chrome
Windows JAWS Chrome
Windows NVDA Chrome
Apple MacOS Apple VoiceOver Apple 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