Navigation

Overview

  • Navigation should be meaningful and expected. This assists all visitors to your site.
  • Convey clear information. What is expected? Meaningful links.
  • If using image links make sure they make sense in context.
  • Navigation content area should have a role=”navigation”

Skip Navigation

Navigation links often precede the main content on every page. People listening to the page have to listen to those links on every page making the main content difficult to find.

Provide methods for skipping to the main sections of the page (content, navigation, etc.) by semantically marking up the page with heading tags. Use of “skip to content” or “skip to navigation” links instead of headers will satisfy this requirement but semantic headings are preferred. Use proper markup including heading tags as screen readers can skip directly to the first heading tag

If there are navigation links before the main content of the page, you can provide a link at the top of the page that jumps over the navigation to the main content.

If navigation area follows main content in natural reading order, provide skip to navigation.

Techniques for Skip Links

Always put the link before the beginning of the navigation if navigation precedes the content on the page.

  • Make an anchor link to the start of the content
  • Make the link visible all the time or it should become visible on focus.  This helps sighted, keyboard only users.
  • Use an anchor link to link from the start of the page directly to the start of the content.
  • Place the target code before the content.
  • Create a link to the content anchor

Example:

<!-- at or very near the top of the page -->
<a href="#main">Skip Navigation</a>
<!-- many navigation links -->
<main id="main">
<h1>Heading 1</h1>

or <a id="main" name="main"></a>
<h1>Heading 1</h1>

XHTML Note

The local anchor (bookmark anchor) should use the id attribute if you are coding in xhtml. If the XHTML is being parsed by an SGML/HTML parser, it will only pay attention to the name attribute, whilst if it’s being parsed by an XML parser, it’ll only pay attention to the id attribute. Hence, it’s a very good idea to use both in anchors when writing in XHTML.

 Techniques for creating the link

  • Link text viewable to everyone.

<a href="#content">Skip navigation</a>

  • Link text that becomes visible with keyboard focus
    Another method seeks to strike a compromise between aesthetic appeal and accessibility utilitarianism. The basic idea of this approach is to hide the link until someone tabs to it. Mouse users will never see the link, because it is not activated by the mouse.

CSS Code

#skip a, #skip a:hover, #skip a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:active, #skip a:focus
{
position:static;
width:auto;
height:auto;
}

HTML Code
<div id="skip">
<a href="#content">Skip to Main Content</a>
</div>

Class Example

Class Example (Before, Problems, After)

WCAG 2.0 Guideline

Guideline 2.4: Provide ways to help users navigate,

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

 Suggested Tools for Checking Navigation

  • IE Web Accessibility Toolbar: Use the Structure tools to check Headings Structure. Make sure the headings include at least one Level 1 heading and that the other headings are nested properly.
  • Web Developer Toolbar for Firefox: Go to the Outline menu and select Outline Headings.
  • JAWS has a Headings mode that allows users to quickly skip to heading
  • JAWS. The best test is to listen to the page. Is there an audible way to bypass navigation? Does the layout of the page allow you to go directly to the content without listening to navigation links? If navigation is at the end of the page, is there a Skip to Navigation link?