Understanding Accessibility

Guideline 13. Provide clear navigation mechanisms.

There are 10 specific checkpoints in Guideline 13.

Guideline 13 checkpoints, ordered from 1 to 10, with priority and how to check the checkpoint given and the disabilities accommodated by applying the checkpoint
No. Checkpoint Priority How to check Disability Accommodated
13.1 Clearly identify the target of each link. Priority 2 WebXact Automatic check Blind
13.2 Provide metadata to add semantic information to pages and sites Priority 2 Manual check for 13.2  
13.3 Provide information about the general layout of a site (e.g., a site map or table of contents) Priority 2 Manual check for 13.3

Blind
cognitive

13.4 Use navigation mechanisms in a consistent manner Priority 2 Manual check for 13.4 Blind
cognitive

13.5 Provide navigation bars to highlight and give access to the navigation mechanism. Priority 3 Manual check for 13.5
Blind
Mobility impaired
cognitive
13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group Priority 3 Manual check for 13.6

Blind
13.7 If search functions are provided, enable different types of searches for different skill levels and preferences Priority 3 Manual check for 13.7 Cognitive
Dyslexic
13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. Priority 3 Manual check for 13.8 Blind
Cognitive
13.9 Provide information about document collections (i.e., documents comprising multiple pages.) Priority 3 Manual check for 13.9  
13.10 Provide a means to skip over multi-line ASCII art Priority 3   Blind

Checkpoint 13.1 - Clearly identify the target of each link.

Screen reader users often jump from link to link when scanning a page. If the links are not self-explanatory there will be confusion for the user. In particular the use of ‘click here’ and ‘more’ is discouraged.

How do I do it?

Links should have informative text. Don't use 'click here' or 'more'. Use words which inform the user about the content of the page the link is pointing to. Duplicate link phrases can cause problems due to ambiguity, where users cannot tell which page they will open when clicking on a link.

Web authors are also encouraged to add link text, via a ‘title’ attribute where necessary for clarity.

<a class="skiplink" href="#startcontent" accesskey="2" title="click the link to skip over the standard navigation links and go straight to the main page content">skip over navigation</a>

How do I check that it meets the WCAG criteria?

WebXact can check this automatically, however pages should be checked for the use of ‘click here’ and ‘more’ and other ambiguous wording in links with a visual check of the page. Pages which have identical link phrases which link to different pages will have failed the check. Pages which use ambiguous wording without additional title text will also have failed the check.

Checkpoint 13.2 - Provide metadata to add semantic information to pages and sites

Metadata is used to provide additional data about the page to the user.

How do I do it?

This can involve using Title, Meta, Address, Link and RDF tags. The Title tag is mandatory as it provides information regarding the page content. Meta tags can include keywords and description information for search engine optimisation, and name, copyright and date information about the page. The address tag can also contain contact information. Links tags are dealt with in checkpoint 13.9. RDF (Resource Description Framework) tags can also be used to provide title, author, date, copyright and licensing information for XML documents.

A metadata sample is shown for a HTML document. Simply insert your own information for each site.

html

<title>Accessible Ireland</title>
<meta name="author" content="Vivienne Trulock">
<meta name="copyright" content="&copy; 2005 ilikecake">
<meta name="keywords" content="accessible, website, design, web design, dublin, ilikecake, accessible web, ireland, webxact, manual checks, automatic checks, user checks, wcag 1.0, w3c, wai, accessibility, vivienne trulock">
<meta name="description" content="accessible web design how to tips and techniques for w3c wai wcag 1.0">
<meta name="date" content="2005-11-22">
<link href=
"../style.css" rel="stylesheet" type="text/css">

Xhtml

<title>Accessible Ireland</title>
<meta name="author" content="Vivienne Trulock" />
<meta name="copyright" content="&copy; 2005 ilikecake" />
<meta name="keywords" content="accessible, website, design, web design, dublin, ilikecake, accessible web, ireland, webxact, manual checks, automatic checks, user checks, wcag 1.0, w3c, wai, accessibility, vivienne trulock" />
<meta name="description" content="accessible web design how to tips and techniques for w3c wai wcag 1.0" />
<meta name="date" content="2005-11-22" />
<link href=
"../style.css" rel="stylesheet" type="text/css" />

How do I check that it meets the WCAG criteria?

As the only mandatory tag is the <title> tag, this will be checked for using the Edit > Find tool in Dreamweaver, searching for ‘<title’. Pages which do not have a title tag will fail the check.

Where <meta> tags are used, the attribute ‘http-equiv="refresh"’ is forbidden. Where this is found the page will fail the check.

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

Site maps are important to give users a sense of the extent, complexity and content available on the site.

How do I do it?

Simply create a page which links to every page in the site. This page can also link to anchors within a page if they are important. Nested lists are recommended as they give a visual and a semantic meaning to the placement of links.

How do I check that it meets the WCAG criteria?

Each site will be checked for a sitemap link. If no sitemap exists the site will be deemed to have failed the check.

Checkpoint 13.4 - Use navigation mechanisms in a consistent manner

Novice users as well as cognitively disabled and blind individuals find a site much easier to navigate if navigational elements are consistently found in the same place.

How do I do it?

Simply keep navigational elements in the same place on each page, though the actual links may change from page to page. The use of style sheets and templates can facilitate this.

How do I check that it meets the WCAG criteria?

Where the main navigational elements (left, right, top and bottom navs, next, back and home links) do not change position from page to page the site will have passed. If any of the main navigational elements have changed, the site will have failed the check.

Checkpoint 13.5 - Provide navigation bars to highlight and give access to the navigation mechanism.

Navigation bars are compact, consistent, well-grouped, and comprehensible sets of links found on every page which helps users to orient themselves within the site. A navigation bar is normally found on the left, right or top of a page with supplementary links to the bottom.

How do I do it?

Simply create an obvious navigation bar on each page. Navigation bars normally have one of the following criteria:

  1. a separate vertical or horizontal grouping of more than two links;
  2. a background colour effect;
  3. a border;
  4. a graphic which implies a navigation bar.

How do I check that it meets the WCAG criteria?

Pages which show a clear navigation bar will be deemed to have passed the check. Pages will fail where there is no visible navigation bar.

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

A method of bypassing grouped links should be provided.

How do I do it?

Skiplinks are created by linking to anchor <A> tags throughout the page or by specifying a tabindex of 1.

<a class="skiplink" href="#startcontent" accesskey="2" tabindex="1" title="click the link to skip over the standard navigation links and go straight to the main page content">skip over navigation</a>

A class style called skiplink can also be created which renders the link invisible to visual users. Simply display at 0 pixels width and height as below.

.skiplink{
overflow: hidden;
position: absolute;
height: 0px;
width: 0px;
}

How do I check that it meets the WCAG criteria?

Pages with navigation bars will be checked for the presence of a skiplink or tabindex using Dreamweaver's Edit Find command with 'tabindex' search strings. Pages which have no skiplinks will fail the check.

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

Some individuals may not be able to use a search box effectively due to spelling or other cognitive difficulties. Different type of searches such as drop-down menus or a series of logically organised links should be provided to facilitate these individuals.

How do I do it?

If you are not implementing search facilities on your pages, then you do not need to worry about this check. If you do have search facilities, then you must also have alternative search methods, such as a logically organised set of links, or a drop down menu. To insert a jump menu in Dreamweaver (a menu which links to pages) simply click on 'Insert > Form Objects > Jump Menu', and select the 'Insert Go Button' checkbox. The code for this is

html

<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="index.htm" selected>index</option>
<option value="contact.htm">contact</option>
<option value="about.htm">about</option>
</select>
<input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo('menu1','parent',0)">
</form>

Xhtml

<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="index.htm" selected>index</option>
<option value="contact.htm">contact</option>
<option value="about.htm">about</option>
</select>
<input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo('menu1','parent',0)" />
</form>

How do I check that it meets the WCAG criteria?

Where search boxes are available, pages will also be checked for the existence of another type of search. Pages which have no alternative search method will be deemed to have failed the check.

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

This guideline refers to the ‘inverted pyramid’ style of writing commonly used in journalism to provide the most relevant information to the top of a section followed by background information towards the end. This style facilitates people using screen readers who can read the header information or the first few lines and skip the paragraph if it is not relevant. It also facilitates cognitively impaired individuals who may find it difficult to read a large piece of text.

How do I do it?

Put the most important information first, with supplementary information towards the end of the page.

How do I check that it meets the WCAG criteria?

Each paragraph should be checked to verify if the first sentence summarises or give a succinct introduction to the paragraph which follows. Where this is the case in all paragraphs the page will be deemed to have passed. Where the index page has little text based information, the ‘about us’ page should be checked instead.

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

How do I do it?

<link> tags are used to provide support information for the document, for example to show which URL is previous or next in a series of related links.

Link tags go in the head and show the files previous to and next to the current page.

html

<head>
<title>Chapter 2</title>
<link rel="previous" href="chapter1.htm">
<link rel="next" href="chapter3.htm">
</head>

Xhtml

<head>
<title>Chapter 2</title>
<link rel="previous" href="chapter1.htm" />
<link rel="next" href="chapter3.htm" />
</head>

How do I check that it meets the WCAG criteria?

It is generally not possible to ascertain whether a document belongs to a collection, unless you are an author of the collection. However where the author has supplied next and back links it will be assumed that the pages are presented in a sequence and therefore part of a collection. Pages which have either a next or a back link will be checked for <link> tags providing support information. Pages which when checked do not have appropriate <link> information will be deemed to have failed the check.

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

Ascii Art, because it is purely visual in nature cannot be understood by or explained to screen reader users. Therefore is is required that you at least allow these users to skip the ASCII art.

How do I do it?

Simply use the skiplink technique shown in Checkpoint 13.6

How do I check that it meets the WCAG criteria?

WebXact issues an Ascii Art warning for all pages, but this must be manually verified by the designer.

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14