If you are a frontend software engineer building web applications, accessibility is an essential component to keep in mind. While there are many automated tools out there that can help you in your accessibility efforts, none of these are adequate replacements for simple manual testing with a keyboard and with a screen reader.

Therefore, frontend engineers need to learn how to use a screen reader.

Screen readers are assistive technology that help blind or low-vision users to navigate their computers. VoiceOver is a screen reader that ships with the operating system on every Mac.

If you’re not familiar with screen readers, learning how to use one can feel like a daunting task. But, it’s actually not that hard to get started! By learning just a few simple commands, you can be navigating your web app in no time.

In this article we’ll go over some of the most common VoiceOver commands to help you get started.

VoiceOver Keyboard Shortcuts

The following are the keyboard shortcuts you would normally use when navigating a web page using VoiceOver.

• Command + F5 - Start or stop VoiceOver

• Control + Option + Right/Left Arrows - Navigate to the next/previous item on the page

• Control + Option + Shift + Up/Down Arrows - Drill up/down on an element

• Control + Option + Space - Click or interact with an element

• Control + Option + Command + H - Navigate to the next heading

• Control + Option + Command + L - Navigate to the next link

• Control + Option + Command + X - Navigate to the next list

• Control + Option + Command + G - Navigate to the next image

• Control + Option + Command + J - Navigate to the next form field (buttons, checkboxes, comboboxes, radio buttons, text inputs, etc.)

• Tab - Navigate to the next focusable element

• Control - Stop VoiceOver from reading

• Control + Option + U - Open the web rotor for quick access to various page content

To go backwards with many of these commands, you can hold Shift while pressing the keys.

Conclusion

That’s it! During 90% of my navigation with a screen reader, I find myself using just a few of the commands listed above. I’ll turn on VoiceOver with Command + F5, navigate through the page using Control + Option + Right/Left Arrows, and interact with clickable content using Control + Option + Space. Just about every other command on that list is just bonus content to help you skip around the page even more efficiently.

For a complete list of VoiceOver keyboard shortcuts, feel free to check out either of these two wonderful guides created by WebAIM and by Deque.

Thanks for reading, and thanks for being an accessibility advocate!