No-fuss Review of Key Elements on a Webpage with a Screen Reader

In my recent speaking engagement about screen readers, I got a question from a developer that I thought would be quite useful to write about. Can the screen reader list out the elements in a webpage and just review from there?

The answer is yes. Typical screen readers have this feature.

POV (Point of View)

You need a quick and simple way to check your website’s key elements without manually going through the whole page.

Purpose

To easily spot common issues in these key elements and correct them accordingly.

VoiceOver (Mac OSX)

VoiceOver on MacOS have a feature called the Rotor that allows users to quickly access different types of elements in a webpage. By default setting, it provides a list of links, frames, landmarks, tables, form controls and headings. You could customize it to show more.

How to access the VoiceOver Rotor
  1. Launch VoiceOver (CMD + F5)
  2. Press VO + U (CTRL + OPT + U)
  3. Use left / right arrow keys to cycle through the Rotor element list
A screenshot of what the VoiceOver menu in MacOSX looks like.

How to customize the Rotor’s list of elements
  1. In MacOSX, go to System Settings → Accessibility
  2. Select VoiceOver → Open VoiceOver Utility
  3. In VoiceOver Utility, select Web → Web Rotor Tab
  4. Check the type of elements you want to have in the Rotor
A screenshot showing VoiceOver Utility menu to turn on other elements to include in the web rotor.

NVDA & JAWS

If you are a Windows user, NVDA & JAWS have similar features too. In NVDA, it’s called Elements List, and in JAWS, it’s called Virtual HTML Features.

How to access NVDA’s Elements List
  1. Launch NVDA from Start Menu or through shortcut keys (Ctrl + Alt + N)
  2. Press NVDA + F7 (INSERT + F7)
A screenshot of NVDA's Element List menu that shows Links, Headings, Form Fields, Buttons and Landmarks types.

How to access JAWS Virtual HTML Features
  1. Launch JAWS from Start menu
  2. Press INSERT + F3
A screenshot of JAWS Virtual HTML Features Menu that lists all important web elements.

Summary

The VoiceOver Rotor, NVDA Elements List, and JAWS Virtual HTML Feature are handy tools for developers and testers to quickly catch common issues such as improper heading levels, non-descriptive links, form controls that have no accessible labels, navigation landmarks that aren’t uniquely labeled if there are multiple, and so on.

Obviously, your test doesn’t end here – just a handy technique you can stash in your testing toolbox!

Cheers!