Status: Work in progress.
Last update: June 18, 2015
Lesson 2: Navigation
Rule: A method shall be provide that permits the user to skip repetitive navigation links. Specially when navigation is repeated in all pages or included in a page template.
User goal: Navigate to relevant content.
- Include a links that allow the user to skip over the navigation and go straight to the main content in the page.
These links can be visible or invisible for non-disable users.
Example: “Jump to main content” or “Skip navigation”
- Use HTML Headings properly. Screen readers and some browsers allow users to move from heading to heading announcing the headings at the corresponding level (h1, h2, h3, h4, h5).
Some options of how to implement this:
- Text link at the top (visible)
- Text link positioned off the screen and move it in on focus
- Use tiny image links (1x1px) of the same color of the background
- Use text links of the same color of the background
Alert! Do not use display: none to hide navigation links. Screen readers respect display: none interpreting it to mean don’t display in any medium including speech.
TIPS: How to improve your navigation links (or any kind of links)
- Choose wording on your links so the user can understand what the link will do.
- Organize your content using true headings (h1, h2, h3, h4, h5) and lists.
- Make sure content is well structure and clearly written. Check spelling, grammar and readability.