Web Access Centre

Hidden navigation - Web Access Centre

Summary: Hidden navigation can make a site a lot easier to navigate for keyboard and screen reader users.

• Rationale
• Techniques
• Testing techniques
• Further information
• Website Accessibility Initiative compliance
• Other pages about navigation

---

Rationale

People who use access technology such as speech or braille output frequently have to listen to the page in linear order. For example, from left to right and top to bottom. This can become tedious and laborious when, for example, the navigation bar has to be listened to, in full, at the beginning of every page on a website.

Similarly, people who rely on the keyboard for navigation will "tab" through the links on a page and unless other means of navigation are provided, will have to "tab" through all navigation links before reaching content.

People who can see the page skip over repeated features and use visual clues to pinpoint the information they want. You can help access technology users enjoy the same browsing experience by providing various types of hidden navigation on your site.

Techniques

• Provide an accessibility help page and own up to your efforts! Include a page on accessibility to explain the features you have built in, otherwise users won't be able to take advantage of the extra functionality or realise the effort you have made to make things easier for them.
  
  
• Skip navigation links provided at the very start of a page will allow users to bypass elements and jump straight to where they want to go, such as the main content, or conversely, if content comes first, a link to the navigation bar could be provided. These don't have to be visually obvious, if you feel they would spoil the design of a page, but many users might find them helpful, so it may be valid to have visible "skip" links.

Example code for 'skip' navigation using HTML:

<! - - Accessibility hidden skip navigation link -->
<a href="#maincontent"><img src="shim.gif" height="1" width="1" border="0" alt="skip navigation"></a>

… (coding and content to be bypassed) …

<a name="maincontent">
<h1>News headlines</h1>

• Organise tab sequence by using the TABINDEX attribute on page elements to make sure that users can navigate through links by pressing their keyboard tab key to move between them in a logical order.

The default order in which the tab key cycles through links and forms on a page is the order in which these elements appear in the HTML code. Most often, this is also the most logical order, but occasionally, because of how the page has been structured, it might be necessary or preferable to set the order artificially to ensure that the sequence is sensible. This can be done using the TABINDEX attribute.

Each element is assigned a number with this attribute. The tab sequence then runs from the lowest through to the highest numbered element on the page, regardless of the order in which these elements are listed in the HTML code. Note though that any elements that have not been assigned a TABINDEX value will be put to the end of the tab sequence so do test carefully to ensure that all elements have been assigned a logical number.

Example code to set the TABINDEX attribute using HTML:

<a href="doc1.htm" tabindex="1"> link 1</a>
<a href="doc2.htm" tabindex="2">link 2</a>
<a href="doc3.htm" tabindex="3">link 3</a>

Testing techniques

Verify that people who cannot use a mouse will be able to navigate easily and logically through your pages.

• Accessibility toolbar - Structure – Show Tab Order (check for logic). Structure – TabIndex (check for logic);
  
  
• Browser - Perform physical checks by simply loading the page into a browser and using your keyboard tab key, and any access keys you've defined to browse through elements of the page. You want to be able to:
  a) Reach important features on the page with minimal effort.
  b) Follow the cursor focus logically through page elements.

Further information

• Access keys: unlocking hidden navigation - An article from A List Apart by Stuart Robinson.

Website Accessibility Initiative compliance

• 13.10 Provide a means to skip over multi-line ASCII art. Priority 3.
  
  
• 9.4 Create a logical tab order through links, form controls, and objects. Priority 3.

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

Other pages about navigation

• Links
• Help pages
• Hidden navigation and tab index
• Access keys
• Navigation
• New windows
• Page titles
• Sitemaps

Back to Design & Build

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

Content author: henny.swan@rnib.org.uk

Last updated: 06/03/2008 15:41