Design Principles
Clearly identify and group navigational elements and provide a method to skip repetitive navigation links
§ Section 508 1944.22 (b): Redundant text links shall be provided for each active region of a server-side image map
§ Section 508 1944.22 (o): A method shall be provided that permits users to skip repetitive navigation links
On web pages, hyperlinks are used to help users move within a document, to other pages within a site or to other pages on the web. They are activated by user action and can be associated with text, graphic/multimedia buttons or image maps. The links can be embedded within the text of the document or grouped to form a menu of navigational elements. Good navigation design helps the visitor easily find what they seek.
Design Consideration for Users of Screen Readers.
- The web page is read from the top down each time the page reloads or is refreshed. If the navigation links are placed before content these links are repeated with each refresh which can become very tedious for the user. Web designers must provide a method to skip list of links.
- Screen readers create a list of links on a page which are presented to the user out of context
- They also have the capability of creating a hierarchical list of headings tags on a page allow the user to easily select and move to a specific section
- They notify the user the number of items in a list <ul> container and the item number of the list <li> item
- The tab key and not a mouse is used for selecting and activating links
Design Consideration for Menus
Menus are usually designed as navigation bars with static groupings of links. University of Illinois at Champaign-Urbana has good example for creating accessible navigation menubars
Large sites with a large number of links often consider Dynamic Menus as a design options to address the need to provide a large number of links without cluttering up the screen. Dynamic Menus selectively display a sub-set list of a menu group on user selection. There are many techniques for creating dynamic menus but they often use images and client side scripts making them inaccessible to a range of functional limitations.
- Mouse only support for displaying and selecting hidden menu links
- Images without text descriptors
- Problems with content reflow when page is magnified
- Foreground and background colors of text
- Accessibility when stylesheets are removed
- Require scripting support
Accessible dynamic menus can be created using <ul> tag, CSS and simple javascript. There are commercial products like Ultimate Drop Down Menu and Project VII that can be licensed from to create dynamic menus or create your own menus using code examples from University of Illinois at Champaign-Urbana, Web Accessibility Best Practices and "Quest for Accessible Dynamic Navigation" article in Accessible Content Magazine, Winter 2006 volume.
Design Consideration for Portals or Resource Pages with List of Links
Use the heading tag <h> to label the group and container <ul> tag with <li> to list items within the group. Images can be included within the <h> tag. US Department of Health and Human Services home page is an excellent example of this design construct.Effective Navigation Design - Summary
| Effective Navigation | Design Activity |
|---|---|
| Should be consistent, easily learned with the least number of steps |
|
| Provide clear, visible and understandable labels (for start point) for links |
|
| Inform users where they are, where they have been and where they are going |
|
| Provide alternatives when links are inaccessible (multimedia, image maps) |
|
| Provide a way to skip navigation links and move directly to content |
|
| Avoid irrelevant and duplicate links |
|
