Skip to content

Day 19 - Using a desktop screen reader

Using a screen reader for the first time can be intimidating. There is a lot of emphasis put on testing with a screen reader and it is an important tool to ensure the content and functionality of your website are usable.

Today we’ll explore the tip of the iceberg in using a desktop screen reader. The goal is exposure if you have never used one and a nudge to test more often if you are already familiar.

The most popular screen readers on a PC are JAWS and NVDA, on a Mac it is VoiceOver which is built-in. NVDA and VoiceOver are free, and while JAWS does have a cost there may be discounts for students. Because it is free, I’ve included the commands for NVDA below.

The goal today is to take the first step in getting a screen reader started and navigating through a website with only your keyboard and audio. It is to get your bearings and see how a number of the topics we have already covered affect the way information is discovered, structured, and interacted with.

Example

Video example of VoiceOver on a Mac interacting with navigation elements on a web page

This example is only a small overview of VoiceOver on a Mac showing the navigation of elements and the rotor display that consolidates content types for ease of navigation.

Task

  1. Visit the Deque keyboard shortcuts link in the resources area and find the screen reader you would like to test. Download or print the cheat sheet so you can have it visible while using your computer without having to switch between applications.
  2. Open the homepage of your website in the preferred browser for the screen reader you plan to test (VoiceOver with Safari, NVDA with Firefox, Chrome, or Edge)
  3. Activate the screen reader (VoiceOver: Command + F5, NVDA: Control + Alt + N)
  4. Listen to what is being read aloud, is it what you expected?
  5. Before going any further, ensure you know how to turn the screen reader off. (VoiceOver: Command + F5, NVDA: Insert + Q)
  6. Start by having the screen reader read the entire page to you. (VoiceOver: Control + Option + A, NVDA: Insert + arrow down)
  7. Watch the screen as the focus is moved between items, is it moving in the order you expected? Is it reading the items and their alt text correctly? Is there extra context provided by the screen reader that you were not expecting? (example: number of items in a list)
  8. Once you hit the bottom of the page, try to move back up the page (Shift + Tab) to move backward between focusable items.
  9. Now explore the rotor display that groups elements on the page by their types (links, headings, landmarks). Refer to the keyboard shortcuts sheet for how to accomplish this with each screen reader.
  10. Once you have explored your homepage, try to navigate to another page on your site without using your mouse.
  11. Repeat these steps for as many pages as you can in 20 minutes.

Considerations

  • If this is your first time using a screen reader, it will be hard and will take quite a bit of practice
  • The keyboard shortcuts are everything. If you can have them in view at all times it will help with building your memory over time
  • Casually testing with a screen reader and using a screen reader as your primary way to consume digital content have completely different workflows
  • For the most part, a screen reader interacts with your website as if you were using the keyboard alone. If your website is usable with only a keyboard, it should be navigable with a screen reader.

Further resources