DEV 3.1 Provide effective navigation based on recognised conventions
Compare with WAI & NDA checkpoints
NDA checkpoints: 1.1, 1.12, 1.15 (P1) / 2.15, 2.20, 2.21 (P2) /
3.14, 3.18 (P3)
NDA checkpoints: 1.1, 1.12, 1.15 (P1) / 2.15, 2.20, 2.21 (P2) /
3.14, 3.18 (P3)
Recommendations
Use common, accepted layouts and navigation standards. This means the user will not need to spend time working out how to use your site. Simplicity and consistency is the key.
- Be consistent with navigation across each page of the site.
- Provide a link back to the homepage from every page:
- e.g. logo at top left of page, an explicit 'home' link.
- Use clear navigation bars:
- Make them distinct and distinguishable from the content;
- Choose the labels for the navigation bar items very carefully - make them meaningful and understandable. Avoid ambiguous terms.
- Provide feedback on navigation bars:
- Highlight the current page on navigation bars where possible;
- Disable the link to the current page:
- this provides extra non-visual feedback,
- this avoids potential misunderstanding and reloading of the same page.
- Be careful with dropdown menus:
- Avoid multi-levelled cascades:
- these can be difficult to use, especially where fine control is required;
- If using then:
- test with a range of users to ensure ease of use
- ensure the menus can be used with a keyboard
- ensure the navigation the menu provides is available without the need for scripting, e.g.
- Implement in CSS
- Make the top menu item a link to an overview page that presents the full set of links present in the cascading menu.
- Make all in-page links easily recognisable:
- Style links so that they are clearly distinguishable from other non-link text:
- Blue underlined is the standard but other styling is fine as long as it is obvious that a link is a link;
- Limit the number of styles you use (ideally to just 1) and use consistently.
- Style links so that they are clearly distinguishable from other non-link text:
- Place in-page links where they are needed for action and are supported by the surrounding context:
- Do not force a user to hunt for a link elsewhere if it makes sense to place it right where it is needed.
- Be careful not to overdo links in body text:
- Rather than pepper a passage with many links, consider a separate section at the end that lists related links.
- Ensure all navigational items can be used with a keyboard as well as a mouse
- Avoid multi-levelled cascades:
Examples
