Enable High Contrast Mode on Windows

Navigate a Webpage with VoiceOver in Safari

Access and Customize VoiceOver Settings on MacOS

Building Accessible Web Apps with React Workshop Prep

Learn the basics of navigating through a web page using VoiceOver on MacOS in Safari.

Instructor: [00:01] Here I am in Safari. Safari has been found to be the most popular combination to use with VoiceOver, much more so than Chrome and FireFox at this time. We're going to use Safari to test VoiceOver. You can enable VoiceOver with Command-F5.

VoiceOver: [00:22] VoiceOver on Safari, Movie Wishlist, window, Movie Wishlist, web content has keyboard focus. You are currently on web content. To enter the web area, press Control-Option-Shift-Down Arrow.

Instructor: [00:36] Right now, the VoiceOver cursor is focused on the entire web window. As it says, we need to hit Control-Option-Shift-Down Arrow to enter the web page. If we continued to move the cursor along, we would move through the various options in the Safari window and out into the operating system.

[01:01] If we want to go into the web page and move through the web page, we have to, as it says, Control-Option-Shift-Down Arrow into that. We'll be using what it refers to as the VoiceOver modifier keys to navigate. By default, that's Control-Option.

[01:20] The other default is Caps Lock. You can set up whatever combination of keys you want to use for the VoiceOver modifiers. We're going to step into the web content.

VoiceOver: [01:33] In movie wish list, web content heading level five, movie wish list login. In heading level five, movie wish list login.

Instructor: [01:42] As you can see, it reads what it's focused on. It describes what the element is and any sort of details or context around that element. We can just, using again those VoiceOver modifier keys and the arrow keys to move through all of the elements on the page.

[02:01] One more thing that's really helpful is sometimes VoiceOver can be very verbose. If you need to pause what it's saying, you can use the Control key.

[02:10] I am just going to step through the elements of the page using the VoiceOver modifier keys plus the Right Arrow key to go forward.

VoiceOver: [02:19] Heading level five, movie wish list login. You're currently on a heading level five username. You're currently on a text element. Enter username. Edit text.

[02:29] Password. You're currently on a text element. Password. Password. Secure edit text. Passwords are case sensitive. Login button. You're currently on a button inside of web content. To click this button, press Control-Option-Space to exit this web area. Press Control-Option-Shift-Up Arrow.

Instructor: [02:49] As it describes, if I'm on a button, if I'm on something that could be selected or clicked, then it will inform me that I can do so with Control-Option-Space.

VoiceOver: [03:02] Press login button.

Instructor: [03:06] That's the basics of using VoiceOver. I'm going to go ahead and turn it off now, again with Command-F5.

VoiceOver: [03:14] VoiceOver off.

Course

Building Accessible Web Apps with React Workshop Prep

Navigate a Webpage with VoiceOver in Safari

Share this video with your friends