Guideline 13: Provide clear navigation mechanisms

If you're reading a book, there are several clues to help determine where you are. Page numbers, chapters, headings, weight, thickness of the part read, and the thickness of the part still to read. If someone navigates to your site from a search engine, have you provided enough information for the visitor to determine the context of where they are? You should provide clear and consistent navigation mechanisms to increase the likelihood of visitors finding what they are looking for on your site.

This guideline has 10 checkpoints, ranging in importance from Level "AA" (should be addressed for the site to be accessible), to Level "AAA" (beneficial to ensure the accessibility of your site).

13.1 Clearly identify the target of each link

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. Link text should be terse, but meaningful enough to make sense when read out of context. Phrases such as, "Click here" should be avoided, and replaced with something more meaningful. If the link text isn't adequate to describe the target, you can provide further information using the title attribute.

The Juicy Studio
<a href="statement.html"
title="How to use the accessibility features on this site">
accessibility statement
</a>.

If you link to large files, such as a file download, you should provide the size of the file in order that the visitor has an idea how long it will take to download the file. Links that will cause a popup window should be clearly identified.

13.2 Provide metadata to add semantic information to pages and sites

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. Meta data is data about data. In the context of web pages, meta data is used to describe the content of the document. Some user agents can provide context and orientation information based on the meta data. For example, Netscape, Mozilla, and Opera can provide a navigation bar based on the link types specified in the link element using the "rel" attribute.

The following example provides meta data about the current document using link elements. The link types provide context and orientation as to where the current document fits within the collection of documents on the server.

<link rel "home" href="/"
title="Juicy Studio Home Page" />
< link rel "contents" href="index.html"
title="Accessibility Contents" />
< link rel "prev" href="context.html"
title="Provide context and orientation information" />
< link rel "next" href="clear.html"
title="Ensure that documents are clear and simple" />
< link rel "author" href="mailto:me@mystudio.com"
title="Send feedback" />
< link rel "glossary" href="/glossary/index.asp"
title="Glossary of terms" />HTTP meta tags can be used to provide information about a page. Search engines may use this information in order to index your pages.

<meta name="keywords"
content="Comma separated list of key phrases" />
< meta name="description"
content="Description of the page." />
< meta name="classification"
content="Computing" />

13.3 Provide information about the general layout of a site (e.g., a site map or table of contents)

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. A site map, or table of contents is easy to produce and maintain. Ideally, the site map should be text based, to ensure accessibility. Many site maps are provided as lists, as it's easy to show the structure of the site. For consistency, the linked text should correspond to the main page title, or h1 header element on the target page. If your site carries a custom "page not found" document, the document should contain a site map to allow visitors to quickly find their way.

13.4 Use navigation mechanisms in a consistent manner

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information. If navigation bars, and main content are consistently in the same place on each page, visitors are more likely to find the information they're after. If the presentation changes from page to page, it can disorientate the visitor, and reduce the likelihood that they will find what they're looking for.

13.5 Provide navigation bars to highlight and give access to the navigation mechanism

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. Each page on your site should carry a consistently placed navigation bar. Providing a navigation bar makes it easier for a visitor to navigate between sections without having to constantly navigate back to the home page.

Breadcrumb trails are particularly useful for visitors who don't enter your site at the home page. Some visitors may enter a particular page on your site from a link, such as from a search engine. A breadcrumb trail is a navigation device that informs the user where they are in the structure of your site, in relation to the home page. They provide an efficient means of backwards navigation. At the top of all page on this site, the breadcrumb trail starts with the text, "You are here: ", followed by a series of links to show the section and the page the visitor is viewing.

13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. Visitors using assistive technology may have the page read to them. The navigation bar is often the first thing found on a page, which means they have to hear a large number of links read to them on each page before they get to the main content. If the navigation bar is grouped into a logical unit, some assistive technologies will allow the group to be skipped as a unit. To cater for user agents that don't provide a means of bypassing the group, you should provide a link to skip the rest of the links. The link should either precede the group, or be the first link in the group.

In the following example, the links are grouped with the map element. The first link in the navigation group provides a means to skip the navigation block using a fragment identifier.

<map title="Navigation Bar" id="NavBar">
<p>
  [<a href="#main" tabindex="1" accesskey="1">Skip Navigation</a>]
  <a href="/index.html" tabindex="2" accesskey="2">Home</a> -
  <a href="/products.html" tabindex="3" accesskey="3">Products</a> -
  <a href="/about.html" tabindex="4" accesskey="4">About Us</a> -
  <a href="/contact.html" tabindex="5" accesskey="5">Contact Form</a>
</p>
</map>

13.7 If search functions are provided, enable different types of searches for different skill levels and preferences

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. If you provide a search facility, it should be able to perform different types of searches. For example, you may choose to implement a search that can search the whole site, or certain sections of the site. You may choose to allow operators to be added to the search term, such as "AND", "OR", "EXCLUDE", etc, to aid visitors perform a more targeted search. The interface for the search facility should be clear and concise. If you use operators to customise searches, there should be a description, with examples of how to use them.

13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. Assistive technologies have to read through the content on a page. Placing important information at the start of sections saves the reader having to read through sections that may not be applicable. For example, place important information at the start of a link.

<h1>Link Types</h1>
<ul>
<li>
Contents - Refers to the document serving as a table of contents.
</li>
<li>
Start - Refers to the first document in the collection.
</li>
<li>
Prev - Refers to the previous document in the collection.
</li>
<li>
Next - Refers to the next document in the collection.
</li>
</ul>

13.9 Provide information about document collections (i.e., documents comprising multiple pages.)

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. You should use the link element with link types to describe documents. Some user agents can use these links to provide navigation aids, or allow a group of documents to be printed in a certain order.

<link rel "home" href="/"
    title="Juicy Studio Home Page" />
<link rel "contents" href="index.html"
    title="Accessibility Contents" />
<link rel "prev" href="context.html"
    title="Provide context and orientation information" />
<link rel "next" href="clear.html"
    title="Ensure that documents are clear and simple" />
<link rel "author" href="mailto:me@mystudio.com"
    title="Send feedback" />
<link rel "glossary" href="/glossary/index.asp"
    title="Glossary of terms" />

You may choose to bundle your documents into a compressed collection that can be downloaded and decompressed for offline viewing.

13.10 Provide a means to skip over multi-line ASCII art

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. ASCII art refers to text characters and symbols that are combined to create an image. ASCII art is very annoying for readers, so you should always provide a means of skipping over the content. The following example spells out Juicy Studio (it's supposed to, but I'm not very good at any art, yet alone ASCII art).

[Skip ASCII art]

 JJJJJJ UU   UU IIIIII  CCCCC  YY    YY
   JJ   UU   UU   II   CC       YY  YY
   JJ   UU   UU   II   CC        YYYY
JJ JJ   UU   UU   II   CC         YY
 JJJ      UUU   IIIIII  CCCCC     YY

 SSSS  TTTTTTTT UU   UU DDDDD   IIIIII  OOOO
S         TT    UU   UU DD   D    II   OO  OO
 SSSS     TT    UU   UU DD   D    II   OO  OO
     S    TT    UU   UU DD   D    II   OO  OO
 SSSS     TT      UUU   DDDDD   IIIIII  OOOO

The following is a picture of Mount Everest from a distance.

^