I hop into VoiceOver all the time to test the websites I’m building. By testing on a screen reader I can uncover bugs that a blind or low-vision persion will encounter.
Here are a few of the commands I use most often.
First the basics:
- Command+F5 turns on VoiceOver
- The VoiceOver keys (abbreviated to VO) are Control+Option. Most VoiceOver commands use these two keys + with at least one more.
- Move around with VO+Left Arrow or VO+Right Arrow. Move into groups with VO+Shift+Up Arrow and back out with VO+Shift+Down Arrow. VO+Space interacts with stuff
- And, for goodness sake, increase the speech rate. The default rate is tedious
1. Ctrl: STOP TALKING!
VoiceOver gets overwhelming. The Control key halts the speech so I can take some time to process everything being said. Pressing Control again resumes where it left off.
2. Tab
This one’s a bit of a cheat, but the Tab key gets extra powers when VoiceOver is on. As usual it jumps between interactive elements. But now I can close my eyes and listen - are the links and buttons and inputs described clearly? Are they missing labels or context? Are they in an unexpected order? Am I forced to tab through an entire nav section without a skip link?
3. VO+U: The rotor
The Voiceover rotor menu is a treasure. It feels like using Mac’s Spotlight. The VO+U rotor has two uses:
See all the page element names in isolation
Firstly - do I see the headlines and links and inputs and landmarks that I expect? What’s missing?
Secondly - can I understand what each element does? Are there links in the list named “⍰” or “click here”? I’d better fix them. Are form controls properly labeled? Do I see a button with the name “button”? Or an input named “edit text” Better fix them.
Quick-jump to an element
I love jumping to landmarks (page regions defined by <header>, <main>, <nav>, etc.) because I can skip over the header/banner and get to the main page content. And it quickly becomes clear if the header or main or footer or navigation landmarks are missing - I’ll get annoyed that I can’t jump to them. Landmarks are the foundation of a quality webpage.
I also love jumping to headlines to navigate to the feature under test. If I can’t quickly jump to a section of the page, that’s an indication that the section is missing a headline.
When I’m debugging in an edit-reload-test loop, I can quickly get back to a feature by opening the rotor, typing to filter the list, and then jump straight to that element on the page.
4. VO+A: Start reading
This command tells VoiceOver to start reading the entire page starting from where I’m at. I can just sit back and listen for anomalies. VO+B will start reading from the beginning of the page.
5. VO+Semicolon: VO keys lock
When I’m navigating through a long page it can feel tedious to keep holding down the VO keys. Especially when I’m contoring my fingers to hit the right hotkeys. The VO keys lock (VO+;) acts like Caps Lock but for Control+Option. I can just use the arrows and spacebar and free up my other hand for a mug of tea.
Share your tricks
These 5 commands + the basic navigation hotkeys probably account for 95% of my VoiceOver usage. If there are other neat VoiceOver screen reader tricks I’m missing out on, let me know on Bluesky or Mastodon.