Why is it important to help visitors navigate?
Navigation on web pages serves two purposes:
- To tell users where they are.
- To let users know how to go somewhere else.
These tasks are often more difficult for people with disabilities. This section describes how to help visitors find content and keep track of their location. The same rules that simplify navigation for people with disabilities also improves navigation for users who do not have disabilities.
Bypass Blocks Explained
People who cannot use a mouse often use the Tab key to navigate around web pages: they press Tab to move “forward” through the content; Shift + Tab to move “backward”; and Enter to activate links and buttons. At best, Tab key navigation is a tedious way to get around, but for some non-mouse users, it is the best option.
Many web pages have content that is repeated on every page. For example, a site may have the same navigation links on the top of all pages. If there are 20 navigation links, a non-mouse user could be forced to press the Tab key 20 times just to reach the main content — and do this on every page.
By meeting this requirement, keyboard users can go directly to the main content without the need to press a lot of keys. A simple way to achieve this is to place a “Skip to Content” link as the first link on every page.
“Skip to Content” links also benefit people who use portable web-enabled devices, such as cell phones. Because the screens of these devices are so small, it may be more convenient to click a “Skip to Content” link than to scroll through many screens to reach the content.
There are a variety of ways to provide navigation elements that allow non-mouse users to navigate effectively and reduce or eliminate the need to navigate through web content in the sequence elements appearing on the page. These include:
- Bypass Links: Skip to Content is one type of bypass link, typically located in the top left corner of the page. When a bypass link is followed, focus moves to an anchor elsewhere on the page, skipping past content in between the link and anchor. Bypass links can also be used with other complex elements within the content of a page, such as skipping over a large data table or past an embedded object or application.
- Headings: When proper HTML headings are used in web content, assistive technology users are able to list them and navigate directly to any one of them, skipping over any content in between the location in focus on the page, and the heading farther down the page. Using proper headings is perhaps the easiest way to meet SC 2.4.1 (Level A), if the site already meets SC 1.3.1 Info and Relationships (Level A).
- Landmarks: With the introduction of WAI-ARIA, site developers can add specific roles to regions of the page that screen reader users are able to list and then use to navigate directly to a block with a navigation menu, to the main content area of the page, or to the footer area, among other potential regions. See the link in the suggested readings below for more about landmarks
All three of these strategies can be used together to accommodate a broad range of users. For instance, landmarks may work well for screen reader users but not so well for low-vision users who may not be using a screen reader. Bypass links may be a more effective means for the latter group.
Page Titled Explained
When a screen reader begins reading a page after it has finished loading, the first thing it reads is the page title. A descriptive title immediately tells the listener they are in the right place (or in the wrong place). Without the title, users have to navigate into the page before making that determination.
For most current browsers, holding a mouse pointer over a tab across the top of the browser window reveals the title of the page being viewed. The title is added to a web page using the HTML
A good title summarizes a page in a few words, so users do not have to read an entire page to know what it is about. Many screen reader users take advantage of titles to keep track of where they are. A title may be based on the main heading on the page, then followed by the name of the site. If not the same as the main heading, the title should be equivalent in meaning to it. When linking to a page, the link text may be the same as the title of the page the link leads to, thus users can make a direct association between the link they clicked and the page that opens.
Descriptive titles also help people interpret search engine results. Many search engines, including Google, display search results as a list of page titles. Not using descriptive titles can also affect a website’s searchability, and its search ranking, whether it appears near the top of the results for a related search query or not.
When writing web page titles, it is recommended that each title:
- Identify the subject of the page.
- Identify the site.
- Make sense.
- Be short.
- Be unique for each page.
It is advisable to position the subject of a page before the name of the site in a page title, just in case the title is truncated to fit available space. Placing the subject before the site/page title allows that unique topic to be informatively displayed in search results or in a browser tab, if the latter part of the title gets truncated.
Focus Order Explained
Content should make sense when navigating by keyboard. Many people who cannot handle (or have difficulty handling) a mouse rely on Tab-key navigation to interact with a web page. That is, they press Tab to move forward through the content; Shift + Tab to move backwards; and Enter to activate links and buttons. Knowing a handful of other hotkeys (keyboard shortcuts) makes it possible for non-mouse users to interact with any web page.
When navigating through a web page via keyboard, people should encounter information in a logical order. This is especially important for screen reader users, who cannot observe how pages are visually organized. When designing for the Web, strive to make the visual organization and the tabbing order correspond.
Link Purpose (in Context) Explained
Links that make sense by themselves enhance usability for everybody. The preferred way to meet the requirement is to write link text that clearly indicates what to expect if the link is followed.
While using meaningful words that describe the destination of a link is always recommended, this success criteria does allow the use of less meaningful words, provided there is context that adds meaning to those words. SC 2.1.4 refers to the phrase “programmatically determined,” which means essentially, assistive technologies are able to gather meaning from the context in which a link appears, giving the link meaning.
For example: Imagine a news website, like the one in the screenshot below, that presents a series of news headlines. Each headline is followed by a sentence or two to introduce the article, followed by a “continue reading” link that leads to the full article. The words “continue reading” on their own do not contain any useful information about the article; however, if the article title that precedes the meaningless link is also a link to the article, users navigating through the links on the page will hear the title followed by “continue reading,” in which case the article title gives meaning to the otherwise meaningless link, by answering “continue reading what?”
By meeting this requirement, a site conforms at Level A. To conform at Level AAA, see SC 2.4.9.