⚠️ This lesson is retired and might contain outdated information.

Navigate a Webpage with VoiceOver in Safari

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

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.

~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today