Skip to main content

Using Screen Reader for Accessibility Testing

This guide shows you how to use the Screen Reader feature in Live for non-visual navigation testing.

Introduction

Accessibility testing has emerged as an important subarea in manual testing requirements for websites. This largely owes to renewed focus on making information technology accessible to all and legislature such as the Americans with Disabilities Act & Sec 508 of the Rehabilitation Act in the US.

Broadly defined, accessibility can be defined as designing and building technology (websites / webapps in this case) in such a manner that it is accessible by all, regardless of disability or degree of impairment. The Web Content Accessibility Guidelines provides the set of criteria against which websites can be designed and tested with a focus on accessibility. These multiple sets of criteria aim to solve accessibility issues across various impairment scenarios including physical / motor, visual & auditory.

One important subset of accessibility testing is checking if a website is navigable and usable using just a keyboard by persons with visual impairments. This is captured by the following guidelines of under the WCAG Quick Reference Guide:

  1. Text alternatives for non-textual content: Textual descriptions of content which are primarily oriented for visual consumption such as pictures or graphics

  2. Keyboard accessibility & navigability: Website content is in logical order, all elements are accessible, navigable, users are able to find required content and determine where they are on page using just the keyboard

For manual testing websites for the above, it becomes imperative that the tester not just rely on visual feedback but use a screen reader for auditory navigation as will be used by actual users of the website under test.

Live now provides a Screen Reader feature for desktop (Windows & MacOS) sessions which allows testers to test non-visual navigation & usability of their websites.

Toggling Screen Reader for Windows & MacOS sessions in Live

Note: Windows sessions use NVDA as screen reader software on the remote machine. On the other hand, MacOS sessions use the OS’s internal VoiceOver tool for screen reading purposes.

Step 1: Ensure that audio is turned on on your personal device/machine. Screen Reader for a Windows or MacOS session in Live can be turned on by accessing the Screen Reader option from the in-session toolbar.

Accessing Screen Reader

Step 2: Checking on the Enable ScreenReader checkbox toggles the ScreenReader feature & should start after a few seconds

Toggling on Screen Reader

Step 3: Enabling Screen Reader should now cause an audio-verbal description to be triggered for every action on the website including pointing, clicking, keyboard navigation etc.

After toggling Screen Reader

Testing websites for non-visual accessibility using keyboard + Screen Reader

An essential component of accessibility is navigability & consumption of site content using simply a keyboard. This combined with screen reading of webpages under test allows covering of non-visual accessibility scenarios.

Four key guidelines from WCAG Quick Reference Guide can be used to create websites which cover these scenarios:

  • Text alternatives
  • Adaptability
  • Keyboard accessibility
  • Navigability

Step 1: After turning on ScreenReader from the toolbar as described above the user may access site content as required using Tab (for moving to next element in the site), Spacebar (for triggering a child element / opening a dialog/menu), Shift + Tab (for moving to previous element) and Esc (for returning to parent element / closing a dialog/menu).

Step 2: The currently selected element should be highlighted using a rectangle as follows, for example, on the browserstack.com homepage:

Navigating menus and sections using auditory description and keyboard

Step 3: Moving across various elements on the page should trigger an audio-verbal description of the element & the element content which is currently selected on the page. The elements may be navigated using the navigation keys as described.

Navigating using different keys

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Talk to an Expert