Navigation Concepts
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Navigations are used to navigate around the website and around individual web pages. Usually they consist of a list of links and need to be operable with pointing devices (like a mouse) and keyboards.
A good navigation on a website is not only the programmer’s task. It begins with the overall content organization of the website, which should lead to a coherent and comprehensible page structure of the website, which is the base for the navigation. Additionally, the design of a navigation is very important to ensure the contrast ratio is sufficient for all users and fonts are big enough.
This tutorial shows you how to use markup, styling and interaction to website navigation. It includes the following pages:
- Navigation Types: An introduction into the basic HTML structure for horizontal, vertical, and breadcrumb navigations.
- Skip Links and In-page Navigation: Use (hidden) links to jump to different parts of a web page when using the keyboard.
- Dropdowns: Implement a dropdown menu in an accessible way.
Why is this important?
- All users use the navigation to reach different sections of the website, it is the central way of exploring and point of reference if the user gets lost.
- Screen reader and keyboard users should be aware which link is currently in focus and about the currently selected item.
- Mouse and touch screen users, as well as users with shaky hands need large targets to tap on.
- Navigation Design
- Navigation Programming
- Link to other pages
- Why is this important?
- Resources
Related WCAG2.0 Resources
Success Criteria:
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)