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 VoiceOverControl + Option + Right/Left Arrows- Navigate to the next/previous item on the pageControl + Option + Shift + Up/Down Arrows- Drill up/down on an elementControl + Option + Space- Click or interact with an elementControl + Option + Command + H- Navigate to the next headingControl + Option + Command + L- Navigate to the next linkControl + Option + Command + X- Navigate to the next listControl + Option + Command + G- Navigate to the next imageControl + Option + Command + J- Navigate to the next form field (buttons, checkboxes, comboboxes, radio buttons, text inputs, etc.)Tab- Navigate to the next focusable elementControl- Stop VoiceOver from readingControl + 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!
Top comments (1)
I'm glad I could help!