Getting Started with Safari on macOS

By mehgcap, 19 April, 2014

Intro

Safari is the Mac's default web browser, and it does all the usual web browser things - opens webpages, downloads files, plays audio, all that. It has some neat tricks, too, like the Reader that can show you only the meat of an article.

However, if you are coming to the Mac for the first time, especially from a Windows background, Safari can seem like a clunky app at best, and a totally unusable mess at worst. As with all things on the Mac, though, you just have to understand how and why it does what it does. Eventually, you will be flying through webpages again, and there are even some nice tricks that VoiceOver can pull off to make your life easier.

How VoiceOver Sees Webpages

Similar to Windows screenreaders, Voiceover on macOS parses webpages into what are essentially virtual documents. This is how you can move around with the arrow keys - your screen reader has taken the content of the page and rendered it to mimic a regular document. So long as you have disabled arrow-key Quick Nav, you can move around a webpage with the arrow keys, optionally combined with modifiers, just like in a document. Move by character, word, or line; jump to the start or end of a line or the entire page; select by adding the shift key to any movement command. It all works in Safari the way you'd expect.

Alternatively, you can use VO-left and right arrow to navigate by paragraphs and web elements, or turn arrow-key Quick Nav on by pressing the left and right arrow keys together, which will allow you to navigate by simply pressing the left or right arrow keys.

navigating By Web Elements

A web element is an item by which you can move - heading, link, list, table, button, text field, and so forth. In Windows screenreaders, you jump by these items with keys (h for heading, for instance). VoiceOver has several ways of doing the same thing.

Single-key Quick Nav

When enabled, single-key Quick Nav allows you to use first-letter navigation just like in Windows. Furthermore, you can go to the Voiceover utility, choose Commanders in the table, and click the Quick Nav tab to customize which keys jump you to which items.

The only thing to be careful of in this mode is text entry; when you go to write something, be sure to disable single-key Quick Nav, or you may find your focus jumping all over the place as each letter you press is interpreted as a command instead of a character. Note that this only applies if you arrowed or flicked to a form field. If you tabbed to a field, you can simply start typing, since single-key Quick Nav will automatically turn itself off.

To enable this mode, Open the VoiceOver Utility with vo-f8 (or vo-globe-8 if you're using a Mac with a Touch Bar), go to Commanders in the table, choose Quick Nav, and check the "Enable single-key Quick Nav" checkbox. Alternatively, this mode can be toggled on and off by pressing VO-Q from anywhere in macOS.

VoiceOver Commands

If you would rather not deal with Quick Nav, you can use several built-in commands. Vo-command-h will move to the next heading, vo-command-l to the next link, vo-command-t to the next table, and more. This set of commands is not nearly as extensive as the set available when using single-key Quick Nav, and it cannot be customized, but it is sometimes faster and less frustrating to use, particularly for newer users. This way, you never accidentally leave Quick Nav on and start doing things you never intended to do.

Other Commanders

Single-key Quick Nav is one commander, but you do have others. For instance, you could configure your mac so that control held down as you perform a one-finger flick down on your trackpad will jump to the next heading. Keyboard and Numpad commanders are also available, depending on your keyboard. This article is not a tutorial on commanders, but suffice it to say that the customization for jumping around pages is almost endless. You can learn more about this in this article about VoiceOver's commanders.

The Rotor

Finally, you can use the rotor. With Trackpad Commander on, the same rotating and flicking gestures you may know from VoiceOver on an iPhone, iPod Touch, or iPad will work on the Mac. To enable this commander, hold down the VoiceOver keys and perform a clockwise turn with two fingers, like turning a small dial. If you want to turn it off, do the same thing, but counterclockwise.

If you lack a trackpad (built-in or bluetooth), or are not familiar with iOS, you can also use the rotor from the keyboard. Simply enable arrow-key Quick Nav by pressing the left and right arrow keys simultaneously, and then change the rotor item with up-right or up-left, moving by that item with up or down. For example, once Quick Nav is on, you can press up-right or up-left until VoiceOver says "headings," then down arrow to move from one heading to the next.

The Web Rotor

A different way to access items on the page is the Web Rotor, a feature similar to listing links and other elements in Windows screenreaders. Press VO-U on a webpage and you are presented with a list of pretty much everything on that page, divided up by type. For instance, there is a list of headings, a list of links, a list of buttons, and so on. Use left and right arrows to move between the lists. Once in a list, either use up and down arrows to navigate, or simply start typing the text you are looking for and, as with any list on the Mac, you are taken to the first match with every character you type. Press enter to be moved right to the item you are focused on, or escape to close the web rotor without moving.

Searching

If you happen to know the text you want to move to, you can search for it. As with any app on the Mac, press vo-f, type your text, and press enter. To find the next occurrence of that text, use vo-g; to find the previous occurrence, use vo-shift-g. It is worth noting that these commands are not specific to Safari, but will work just about everywhere across macOS.

Links

When you are on a link, your first instinct may be to press space on it - I know mine was. On the Mac, though, space will only activate buttons, checkboxes, and other form elements. To open links, use enter instead. VO-space also works, as does up-down arrows if arrow-key Quick Nav is on. I prefer to use enter, though, because you can combine it with modifiers to do different things:

  • enter: open link
  • Option-enter: download linked file
  • Command-enter: open link in new tab (does not auto-focus on new tab)

Filling Out Forms

One thing that trips a lot of people up is filling out forms - entering text, selecting from drop down lists, navigating fields, reading prompts, and all the other fun things that are too often not fully accessible.

Moving Around a Form

As on Windows, tab will move you around a webpage, letting you quickly tab from form field to form field. However, you must enable the setting first, which is why many people think it cannot be done. Simply go to Safari, press command-comma to open the settings, go to the Advanced tab, and check the "Press Tab to highlight each item on a webpage" checkbox. Command-w closes the settings, and you are ready to tab.

Prompts

Not all webpages are accessible. Often, you will move to an edit field or checkbox, and VoiceOver will simply report the element, without telling you what it is for. This is because the web author did not properly label it. If you are a Jaws user, you may find that Voiceover offers no labels on pages where Jaws offers them. This is because Jaws is using the text around the form element to guess at the prompt, whereas VoiceOver (and even some other Windows screenreaders) is not going to take a guess, but will instead only speak a prompt if one is explicitly provided. If an element lacks a prompt, simply vo-left or vo-right, or use plain arrow key navigation, to find out what is around it.

Entering Text

On Windows, Jaws and NVDA both have a special mode that lets you enter text. When in this mode, keys pressed go right to the webpage instead of being interpreted as navigational commands. VoiceOver works exactly opposite: normally, keys go right to the page, so to type text you need only find a text field, and begin typing. If single-key Quick Nav is enabled, though, your typing will be interpreted as commands, similar to Windows screenreaders when text entry mode is off. It takes getting used to, but once you shed the habit of pressing enter each time you focus on an edit field, it becomes very convenient to enter text. Plus, even with single-key Quick Nav off, you can still move by heading, link, and a few other elements, and you can navigate with the arrows to see the text around an input field without needing to switch modes at all. Remember, too, that if you tab to a form field, single-key Quick Nav is automatically disabled for you.

Dropdown Lists

They go by many names: select/selection lists, drop down lists, combo boxes, and more; VoiceOver calls them popup buttons. They are those lists of items you can choose from, such as picking your country and state. On the Mac, they are very easy to use: find one, and press vo-space, down arrow, or space (with arrow-key Quick Nav on, you can also use the up and down arrows together). Once opened, use the arrow keys or the usual typing navigation available in any list or menu on the Mac to find the item you want. Press enter, space, vo-space, or up-down (arrow-key Quick Nav only) to choose that item, and the list closes with the item now selected.

Checkboxes and Radio Buttons

Checkboxes and radio buttons are both selected in the usual way (space, vo-space, up-down with arrow-key Quick Nav on, or double tapping with Trackpad Commander on). Note, though, that using space by itself will work, but not offer feedback. The other methods will cause VoiceOver to announce the selection you just made, but simply pressing space will make the selection while VoiceOver says nothing.

Custom Window Spots

A custom window spot is a way to mark a location in a window or page so you can go back to it later. For instance, you might mark the main portion of a cluttered page you often visit, or a heading with information that changes a lot.

Window spots are treated like a list you move through. To move forward a window spot, press vo-command-right bracket; to move left, vo-command-left bracket. To set the part of the page you are on as a custom window spot, press vo-command-shift-right bracket; use left bracket instead to remove a spot while you are focused on it. That's all there is to it.

Important note: custom window spots do not work well on pages that update and change their length. For example, they will work on a page showing an article, but on a forum, new content will lengthen the page and move or break your spots. In other words, they are useful, but do not work well on all pages.

Dealing with Tables

Navigating a table is simple: the VoiceOver keys with the arrow keys will move cell by cell (E.G. vo-right moves right a cell, vo-down moves down a cell). While you are in a table, use vo-home or vo-end to jump to the top or bottom. Note that this is vo-globe-left or vo-globe-right on an Apple keyboard or Macbook.

⁃   A command not specific to Safari that may also be helpful is the command to toggle table interactability. When off, which it is by default, you will automatically begin reading the cells in a table as you move through a webpage with vo-left or vo-right. If you enable interaction required for a table, though, you will simply hear "table" as you move to that table (note that this is a case-by-case command, not a global toggle for all tables).

Miscellaneous Commands

Here are a few other helpful commands. Some of these are in the Menu Bar (vo-m), while others are VoiceOver-specific.

  • vo-shift-u: when on a link, this will speak the URL to which the link points. Tip: press this, then press vo-shift-c, to copy the link's URL to your clipboard without needn't to open the link at all.
  • vo-shift-m: right clicks/control clicks a link
  • vo-f2: (or vo-globe-2 if you're using a Mac with a Touch Bar) speak title of current page
  • vo-shift-i: speaks the webpage title, then the number of links, headings, and so on
  • command-l: open a new location (in the current tab); this also speaks the URL of the current page and lets you copy it to the clipboard
  • command-t: open a new tab
  • command-w: close current tab
  • control-tab: next tab
  • control-shift-tab: previous tab
  • command-d: save the current page to favorites
  • command-option-l: view downloads (interact with the table, then the group of a download, to view details)
  • command-left bracket: back a page
  • command-right bracket: forward a page
  • command-r: refresh the page
  • command-period: stop page loading
  • command-shift-r: toggle Reader, if available (strips out all but the main text of a page)
  • command-shift-backslash: toggle showing all open tabs in a single window. This window includes tabs open on your Mac as well as on other devices signed into your Apple ID, and has a search field.

Disclaimer

The article on this page has generously been submitted by a member of the AppleVis community. As AppleVis is a community-powered website, we make no guarantee, either express or implied, of the accuracy or completeness of the information.

Options

Comments

By burak on Monday, April 21, 2014 - 11:20

Hi, can you do a tutorial for iOS sometime? I do use safari on iOS, but would like to know more.

By Carlos Alonso on Monday, April 21, 2014 - 11:20

Another excellent article, good example of what makes Applevis such an awesome resource

By Piotr Machacz on Monday, April 21, 2014 - 11:20

Safari on iOS is very similar to safari on the mac on many levels. For one thing, you have the rotor on both (not the web rotor though), and if you have a keyboard connected, you can use first letter navigation with quicknav to go by heading, link, etc. What you don't have is the web rotor mentioned above, and the web spots. This is a very nice guide. One thing you didn't mention is the difference between dom and group navigation modes. Dom navigation is what VO defaults to and it just displays the page as it was written in the HTML file, from top to bottom. Group navigation works just like if you have the use screen layout option on it NVDA except even more visually, where it groups items in lists or on one line. So, as an example, if you have a line that says please click here to continue, and the click here is a link: 1. With dom navigation, you will see 3 items, the first being please, the second being the "click here" link, and the last being the remaining text, to continue. 2. With group navigation you will just see the whole line as one chunk, although VO will indicate what part of the text is a link. TO actually read it in more detail, you now need to interact with it.

By mehgcap on Monday, April 21, 2014 - 11:20

Thanks for pointing that out, I can add in a section about the two modes.

By the way, on iOS, bring up the Item Chooser while on a webpage with vo-i or a two-finger triple tap. Now swipe left or right with three fingers to move between the element types; you basically have the web rotor. Enjoy.

By Ekaj on Monday, April 21, 2014 - 11:20

I, too, am finding this guide as well as the others you have written to date, to be extremely helpful. Yesterday I spent some time with my sister exploring this site and I pointed out these excellent tutorials. Tomorrow morning she and her life-skills tutor are going to another training session at our local Apple store. I am certainly learning something pretty much every day on this website.

By splyt on Saturday, June 21, 2014 - 11:20

Hello,

I discovered that while having quick nav on if I am in edit fields if I shift tab and tab again I can write text down with no problems.

I have two questions:

How to simulate a mouseOver (Jaws we do ctrl + jaws key + enter) .. this is each time more useful because many sites will make menus available when puting the mouseover not when activating it.
How to skipe from onChange on combos (in JAWS we do alt + down arrow) because comboboxes sometimes have a onchange reloading the page everytine an item is selected, making choosing the fifth item on a combobox virtually impossible,.

By mehgcap on Saturday, June 21, 2014 - 11:20

Thanks for pointing these out, I forgot to add them.

To hover the mouse, simply press control-option-command-f5. If you do this a lot, it might be worth setting up a commander to execute the "route mouse cursor to VoiceOver cursor" command.

To browse combo boxes, turn cursor tracking off with control-option-shift-f3. Once off, use control-option-up/down to move through the box's options, and control-option-space to choose one. Don't forget to turn tracking back on with the same control-option-shift-f3 command again or you'll have no end of trouble. Also note that this is only necessary for combo boxes (popup menus, as VoiceOver calls them) that respond to every focus change made; lists that do not do this can be browsed normally.

By splyt on Saturday, June 21, 2014 - 11:20

As for the onMouseOver is voiceover capable of handling dom programatically modified (e.e see and anounce the new menus ons creen and etc) (jaws will anounce text has changed and the line of the virtual buffer where it changed)?

Marlon

By splyt on Saturday, June 21, 2014 - 11:20

Please do edit your post and complement info on these two topics cinse these are the two hard things to find about navigation with voiceover on browsers.

By Toby on Sunday, August 21, 2016 - 11:20

In reply to by mehgcap

Hello, I am new to Mac and having trouble finding the address bar to type in a URL. Is there a keystroke to move focus to the URL? Windows equivalent is alt+D for example.
Thanks,
Toby

By Greg Wocher on Sunday, August 21, 2016 - 11:20

Hello,
To move to the address bar hit command plus L. When you get to the address bar make sure you dont have quick nav on. I too just started using the mac here recently.

Regards,
Greg Wocher

By PaulMartz on Thursday, September 21, 2017 - 11:20

September 2017 and this is still an excellent getting started resource. Thanks!

By Ana Helena on Thursday, February 21, 2019 - 11:20

Thanks for an excellent guide!

In the OSX VoiceOver Utility you can choose to navigate pages by DOM order or Grouping items. I understand from a previous comment that the Grouping items option is similar to an NVDIA setting.

I am a programmer and this is my second time round with VoiceOver support for a web app with Safari/OSX. I'm prepping by using VoiceOver on a bunch of different web sites to get used to the interactions.

I find that both on this and the previous occasion, I struggled initially because the default setting for page navigation is "Grouping Items", at least on my systems. I simply don't seem to be able to find my way around pages with this setting unless I cheat and look, as the focus order often doesn't match the organisation of the layout and seems to jump around. Once I switch over to DOM order I'm OK (modulo the accessibility quality of the code).

So my concern is that I am not testing properly if I don't use the default setting. Is that true, or is it usually the case that a site that uses ARIA markup properly and has been tested with DOM navigation order works OK with grouping items as well?

If not, I'd be grateful if somebody could point me to a guide that helps me understand how to manage with the grouping items setting!

By Karina Velazquez on Tuesday, April 21, 2020 - 11:20

Hi!
I'm relatively new to Mac. I still have some questions regarding some shortcuts that don't work in my Spanish Keyboard and others that are not listed in this article, so hope someone could help me with them:
1. In my Spanish keyboard I never have been able to make the command left bracket to move backward a page.
2. How could I jump from the content of the current page to the lateral bar? I use the letter B multiple times with Quick Nav on, and someday I will get to it, but I think there must be a direct way to do so.
3. How could I jump directly tu my favorites? I find that it is very complicated to reach the markers tab making a lot of movements, and I would like to find a shortcut just like in internet explorer in windows, where I can have my.favorites with just a single shortcut.
4. Also the shortcut command-shift-backslash doesn't open any open tabs list, for me.
5. How could I jump to the top of the page with a shortcut?

Thanks in advance for any help.

By Pascal on Wednesday, September 21, 2022 - 11:20

When reading an article, how does one copy an embedded link in the article using voice over. Excellent article. I am still a new Mac user.

By Tyler on Wednesday, September 21, 2022 - 11:20

Member of the AppleVis Editorial Team

To copy a link, focus on it and choose "Copy link" from the context menu, accessed by pressing VO-Shift-M.

HTH