This chapter provides information about using VoiceOver to browse and navigate webpages effectively using two different navigation modes, items such as tables or web spots, and the VoiceOver Web Item rotor.
There are several ways to browse and navigate webpages.
Navigate webpages using DOM or group mode
Navigate webpages using the Web rotor
Use rotor settings with gestures
Navigate webpages using web spots
Web developers can assign keyboard shortcuts, called “access keys,” to webpage items such as links and buttons, to make them easier to interact with. VoiceOver can announce when it detects access keys, saying for example “Access key available: s” for a link; then you press Control-S to open the link. To hear access keys, select the option for help tags in VoiceOver Utility (in the Hints pane of the Verbosity category).
Hear how many headings, links, tables, landmarks, live regions, and more are on a webpage.
Press VO-Shift-I.
VoiceOver speaks statistics only for the types of items listed in the Web rotor.
You can set an option in the Web category of VoiceOver Utility to have the summary read automatically when a webpage opens.
VoiceOver provides two modes for navigating webpages: by a webpage’s Document Object Model (DOM), or by grouping related items.
Open VoiceOver Utility (press VO-F8 when VoiceOver is on), click the Web category, click Navigation, then select “DOM order” or “Grouping items.”
Do one of the following:
Navigating by DOM moves left and right, in the order set by the webpage’s author. (Moving up and down in DOM mode is based on the current setting of the Web Item rotor.)
To navigate list items, press the VO keys with arrow keys (you don’t need to interact with a list to navigate the list items).
Navigating by group moves in any direction, to help give you a sense of context.
To navigate list items, interact with the list. You don’t need to interact with groups that contain only one item.
When you navigate to a list, VoiceOver indicates the number of items in the list and when it has reached the end of the list.
If you use VoiceOver gestures, the current web navigation mode affects how you navigate webpages using the rotor. In DOM mode, flicking up or down moves to the previous or next instance of the item that matches the current rotor setting. In group mode, flicking up or down moves to the previous or next group of related items.
You can set an option for when to navigate to images in the Navigation category in VoiceOver Utility.
If an image doesn’t have a description, VoiceOver speaks the image filename. You can create a custom label for these images, or for images whose alt text isn’t useful.
Navigate tables on webpages by grouping items within the tables. When you navigate tables by grouping, you hear a summary of a table and its cells as you press the arrow keys to navigate. You don’t need to interact with the table unless you hear something that you want to explore in detail. You can use a VoiceOver command to turn grouping on or off.
Open VoiceOver Utility (press VO-F8 when VoiceOver is on), click the Web category, click Navigation, then select “Group items within.”
Press VO-=.
Only the table you’re currently in is affected by this command; other tables will still use the setting specified in VoiceOver Utility. VoiceOver remembers the setting for the current table and will use it each time you navigate to that table. When you turn off grouping for a table, you must interact with the table.
When you’re navigating tables without grouping, you can navigate more quickly to the next column by pressing VO-Command-Y or navigate to the previous column by pressing VO-Command-Shift-Y.
Webpages can contain areas, called “live regions,” whose content is updated without refreshing the entire page. VoiceOver can detect live regions, even when the focus is elsewhere on a webpage, and speak the content in the live region as it changes.
You can specify gestures, keys, or input keys on a refreshable braille display to work with live regions.
Assign VoiceOver commands to gestures
Web developers can assign landmark roles to areas of a webpage to help screen readers identify the types of content on the webpage. For an example of a webpage that contains landmarks, visit store.apple.com.
VoiceOver supports all landmarks, including:
Banner: The area that contains the page name, logo, or other identifying information.
Complementary: An area, such as a sidebar, that supports the main content area.
Content info: The area that contains footnote-type information, such as copyright or privacy statements.
Main: The area that contains the main content.
Navigation: The area that contains a navigation bar or other links for navigating the webpage or website.
Search: The area that contains a search field for searching the webpage or website.
If landmarks are listed in the Web rotor, you can use the rotor to move to a specific landmark.
Navigate webpages using the Web rotor
You can use the Trackpad, NumPad, Keyboard, and Quick Nav Commanders to specify gestures or keys for navigating to the next or previous landmark on a webpage. You can also specify input keys on a refreshable braille display to navigate to landmarks.
Assign VoiceOver commands to keys
As VoiceOver opens a webpage, it evaluates the visual design, groups items based on the design, and creates an “auto web spot” on the first item in each group. VoiceOver briefly outlines the group with a large rectangle, which transitions into the VoiceOver cursor, positioned on the first auto web spot in the first group. You use commands or the Web rotor to jump from one auto web spot to another on the webpage.
You can create your own web spots to mark favorite content. If you mark one of your web spots as the “sweet spot,” it appears first in the list of web spots in the Web rotor.
If the design of a webpage changes significantly and VoiceOver can’t locate a web spot that previously existed on the page, it creates a new one that closely matches the original one.
You can set an option in the Page Loading pane of the Web category in VoiceOver Utility to have the VoiceOver cursor focused on the sweet spot when the webpage opens.
If a webpage organizes information into areas called “frames,” you can navigate the page using them.
If frames are listed in the Web rotor, you can use the rotor to move to a specific frame.
When you browse a webpage, you can use the Web rotor to jump directly to an item on the page, such as a heading or a link, or to navigate the page line by line.
To show all items in the list again, press the Delete key.
The Web rotor closes.
You can choose the types of items that are listed in the Web rotor.
If you’re using VoiceOver gestures, you can access the web-related rotor settings with a gesture.