Navigating on the Web: Headings and Links

One of the main reasons you may want to use a computer is so you are able to access information on the internet. VoiceOver and it's commands make it easy once you learn how it works.

Learning to listen and control VoiceOver is a very important skill if you want to control your device, after all you are practicing that right now. Remember, that you can make VoiceOver stop talking with a press of the Control key.

A main feature of navigating the web using the keyboard is the use of the Rotor. With it you can change how you navigate the web page just as you did when you navigated text.

The best way for you to learn how to move around a web page, is to build an understanding of how they are organized and how you can use that knowledge to easily move around them.

How Does the Internet Work?

The consumer of information on the internet with a visual impairment needs to be able to open a web browser, type in an internet address, and load a web page that they want to explore.

Luckly, the internet is a highly structured place which means its very structure gives you the means to control and use it.

Everything on the internet is coded into HTML documents that live on a Server that is connected to the Internet.

There is a lot in that last sentence, let's break it down a little. HTML stands for hypertext markup language, it is the language written into the html document which tells your web browser what to display on your screen.

An html document lives on a computer called a Server. The Server is connected to the internet where it hosts that html file for a user like you to visit.

As a result, the internet is an immense web of inter-connected servers, and an even more immense number of web pages stored on those servers. You might have heard the internet called the World Wide Web before, it's because of the way it was designed. What a great idea.

HTML pages, or web pages, have features that can make it easier to use if it has been coded correctly. We will examine these features as we continue.

Have you noticed that VoiceOver says something extra when it reads the text on the screen, something like, Heading level 1, as it does on this line?

This is because, like this line, it was coded as a Heading level 1 when it was written.

This is another Heading, however listen as VoiceOver calls it a Heading level 2.

This is because, while the first lines were coded as a Heading level 1, the second was coded as a Heading level 2; you may even notice that the line you are on now is coded as a Heading level 3!

Headings are a very important web page element for a screen reader user, they organize the page by identifying the important sections of the page. Once you understand this, you can use a gesture or command to jump from heading to heading, from main section to main section, very easily.

When you reach the heading you are interested in reading more about, you should change the way you are navigating.

Perhaps you can try navigating by line so that you can read more about the subject of the section.

Use the Rotor gesture or the Up Arrow and Right Arrow at the same time if you are using an external keyboard.

Lower heading levels, such as a Heading Level 2, 3, 4, 5, or 6, are used below the heading level 1 to further organize the information provided in that area.

So we know that a heading provides the main idea for an area on the page; the area below a heading provides the supporting information to the main idea. This allows you to quickly navigate to an area on the web page, and access the supporting information you want to read without having to visit every item on the page to find what you are looking for.

Remember, it is a good practice to move through the headings on a page so you can get a clear picture of what is on the page, especially if you have never been to that web page before.

Text Elements

The supporting information that you find under a heading is usually coded as a text element. It is usually written as a sentence, a paragraph, or series of paragraphs. When you reach a text element, VoiveOver reads the text and then tells you that it is a text element, as it does on this line.

Links

A link is a piece of code that tells your web browser what it should do when you click on the link.

Links provide the connections that make the internet possible. How could you have a World Wide Web without some way to link the pages together?

To activate a link, move to the link and press VO + Space.

Web Spots

You can navigate webpages using auto web spots, which VoiceOver automatically creates when it opens a webpage, based on the page’s design. You can also create your own web spots to mark your favorite content on a webpage.

Use Auto Web Spots

As VoiceOver opens a webpage, it 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, focused on the first auto web spot in the first group.

You can use commands (or the VoiceOver rotor) to navigate the webpage using the auto web spots.

• Jump to the next auto web spot: Press VO + Command + N.
• Jump to the previous auto web spot: Press VO + Command + Shift + N.

Create and use your own web spots

You can mark one of the web spots you create as the sweet spot, so it appears first in the list of web spots in the VoiceOver rotor.

• Create a web spot: Press VO + Command + }.
• Delete a web spot you created: Press VO + Command + {.
• Set a sweet spot: Press VO-Command + } + }.
• Jump to the next web spot you created: Press VO + Command + ].
• Jump to the previous web spot you created: Press VO + Command + [.

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.

VoiceOver Web Commands on Mac

Use these commands to perform actions such as navigating and interacting with webpages.

Note: When VoiceOver is on, you can enter VoiceOver commands by using the Fn and number keys with the VoiceOver modifier, as an alternative to using the function keys (F1 through F12). For example, to open VoiceOver Utility you can press Control + Option + Fn + 8 (instead of Control + Option + F8).

If you use the function keys (F1 through F12), you may need to also press and hold the Fn key, depending on how you set the behavior of function keys in Keyboard settings.

Using Quick Nav with the Arrow Keys

Turn on Quick Nav to control VoiceOver using the arrow keys.