Web Access Centre

Clear and consistent navigation - Web Access Centre

Summary: Navigation should not drastically change within a site.

• Rationale
• Techniques
• Non-link printable characters
• Testing tips
• W3C WAI compliance
• Other pages about navigation

---

Rationale

Inconsistent navigation can reduce a website to a confusing muddle of pages and resources. Using too many different types of navigation increases that risk.

So if on a single page there were buttons, images, icons, text links, and image maps for navigation, this would make a total of five different ways to progress to further information. This may be bewildering for some people, especially novice users or people with cognitive difficulties.

It is also important to note that preventing the underlining of hypertext links within the body of content can mean users may not recognise them as links.

Navigation mechanisms should also not rely on people being able to use a mouse to activate them, as a number of users are unable to operate a mouse. For instance people who cannot see will typically use keyboard commands, as may older users or those with restricted mobility, such as repetitive strain injury or upper limb paralysis.

A website that has consistent and intuitive navigation, is a usable website. It speeds up a visitor’s ability to “learn” how your website works. The quicker they become comfortable with getting around, the more effective they will be at finding information and completing tasks, such as purchasing goods and services.

They are also much more likely to return to your website in light of the ease of use and level of confidence that it inspires. When they do come back the will also be successful at “re-finding” information. This is frequently overlooked when designing navigation systems, and frustrates people who are “sure it was there the last time”.

Techniques

• Simple intuitive navigation should be provided. This may mean restricting the number of different means of following links on any single page.
  
  
• Top level navigation should be made very obvious and easy to use, so where appropriate, provide navigation bars either at the top or the side of page content so that users can easily visit other interesting parts of your site without having to backtrack.
  
  
• Be consistent, once you've decided on the most appropriate means of navigation through your site or pages, stick with it throughout unless there is a sound reason for changing. For instance to emphasise that the user is in a particular section which in itself is different from the rest of the site.
  
  
• Use colour and whites pace to draw attention to groups of links, and ensure, if colour is used, that there is a good contrast between the text and background colours.
  
  
• Underline text links, especially within the body of the content of a page to ensure that they are obvious.
  
  
• Keyboard navigation must be made possible throughout the site. This means that dropdown menus that are activated on mouse over or dropdown lists that activate immediately a list item is selected should be avoided. Alternatively provide other ways to reach the same destinations.

Another common error is using the JavaScript ONCLICK event handler for links. If this is necessary, alternatives must be provided, whether as an additional ONKEYPRESS command, or preferably as a standard HTML link.

Remember, not everybody can use a mouse.

• A site map should be provided wherever possible. It should be made up of a series of text links that mirror the architecture of the site. Using ordered and unordered lists for this purpose is considered the best way to present information.
  
  
• Use breadcrumb trail navigation. This provides a very usable method of helping people orient themselves and navigate more easily through large websites.

Non-link printable characters

This WAI checkpoint (WAI checkpoint 10.5 [Priority 3]) regarding printable text can now be disregarded in light of subsequent developments in access technology.

The checkpoint advocates using a non-link printable character between links, usually a bar character “|”. It refers back to a time when speech and braille output software was unable to distinguish between the end of one link and the start of the next when they were grouped together.

This is no longer the case as the current generation of speech and braille output software can correctly interpret the gaps between links. In fact, listening to the non-linked character can become irritating to someone who will constantly hear ”vertical bar” repeated between each link.

Testing tips

Menus should be consistent and logical. Also ensure that a sitemap is made available. Navigation elements on a page must be navigable without using a mouse. Unplug your mouse and use the keyboard "tab", "arrow" and "enter" keys to move through the site.

• Accessibility toolbar – Checking that mouse only events are not present: Structure - Event Handlers. To ensure that navigation mechanisms all work without JavaScript: choose IE Options - Toggle JavaScript (switches support for JavaScript off and on) AND Doc Info - Identify Applets / Scripts [new window].
  
  
• Browser - Manually judge if navigation is clear. Carry out user testing if possible. Ensure a site map or table of contents is available. To check that navigation doesn't rely on the use of a mouse: View - Source. Edit - Find - "script" and check for "click" or "mouse" only event handlers. OR Tools - Internet Options - Security - Custom level Scripting then check "Disable active scripting".
  
  
• Text browser - If links do not open JavaScript is used without accessible alternatives, as Lynx has no support for JavaScript.

W3C WAI compliance

• 13.4 Use navigation mechanisms in a consistent manner. Priority 2
  
  
• 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. See above notes regarding this checkpoint.
  
  
• 13.5 Provide navigation bars to highlight and give access to the navigation mechanism. Priority 3
  
  
• 13.3 Provide information about the general layout of a site (e.g., a site map or table of contents). Priority 2

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about navigation

• Use clear and consistent navigation
• Clear link text
• Pop-up windows and new file types
• Hidden navigation, accesskeys and tabindex
• Meaningful page titles

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41