Most people learn how to test websites for keyboard navigation, then once they are comfortable with that, they move on to screen readers. Unfortunately, then they make this really common mistake and get frustrated.
- When switching from keyboard navigation to screen reader navigation, you need to use the VoiceOver keys (Control + Option) instead of the tab key.
- To navigate forward, use the right arrow key while holding down the VoiceOver keys.
- To navigate backward, use the left arrow key while holding down the VoiceOver keys.
- It’s essential to switch from using regular keys to VoiceOver keys when using a screen reader.
- Consider turning on the VoiceOver lock for easier navigation.
Additional Resources
- A cheat sheet on Deque provides more information on VoiceOver keys.
Transcript
[00:00:00.450] – Gen
Have you ever tried to go from knowing how to navigate a website with the keyboard to trying to navigate a website with a screen reader? If you have, you’ve probably run across this really common issue.
[00:00:15.860] – Gen
When I navigate a website, for example, WebAim, with my keyboard, I go through and I hit each of the different links. You can see here that I’m tabbing through the different links and they’re showing up as highlighted. However, this is not how I interact with the website with a screen reader. Let’s flip on my screen reader and show you how that works. I’ve got the screen reader active now.
[00:00:42.960] – VoiceOver
Voice over on application, webaim, web accessibility in mind, window, link, accessing higher ground as keyboard focus.
[00:00:52.550] – Gen
Okay, so here I am on this. In order to navigate with a screen reader, I can’t use my normal keyboard navigation. When I use the keyboard, I use the tab key and shift tab to go back. These are my most often used keys.
[00:01:11.140] – Gen
When I use the screen reader, I have to activate the voiceover keys, not the tab keys. So I’m going to hold down control and option, which are the VO or voiceover keys. And once I do that, I will then use the left and right arrow keys while I hold down the VO.
[00:01:31.960] – VoiceOver
November seventh, Tempi. Link. Asu, Accessibility Awareness. Heading level 2, Webaim activities.
[00:01:38.960] – Gen
I navigated through those by holding down the VO keys or Control and Option while using the left arrow key. I can also go forward with the right arrow key.
[00:01:50.760] – VoiceOver
Link. November seventh, Tempi. Link. November 11th, to end of article.
[00:01:56.000] – Gen
I can go through with the voiceover keys. There’s a great cheat sheet on Deque, which tells you all about the different voiceover keys. But the big thing to know here from using keyboard navigation to screen reader navigation is that you have to switch from using hitting regular keys, to always using the voiceover keys. And remember, you could turn on the voiceover lock. Again, reference the amazing article from Deque.