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