Guideline 13
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.
^