skip over navigation

People using screen readers are often forced to listen to a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content. [1]

This is an analysis/study of techniques for “skip navigation” links (also “skip to main content” links) which resulted from an assignment I had in the Web Content Accessibility Guidelines working group, Techniques task group. [2]

If you didn’t manage to hack your templates to present your main content first, here’s a compromise: provide an link to skip over your navigation links. [3]

The “skip navigation” idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted. [1]

At CNN there is a lead story in the center of the page and a lot of information (links, mostly) that precedes the main story when listening to the page with a screen reader or when tabbing through the links. [2]

Due to the layout, with the navigation on the top and the long list of links on the left, users must tab through 118 links in order to reach the main content. [1]

As was pointed out in the WCAG task group, that local anchor (bookmark anchor) better use the id attribute if you are coding in xhtml. [2]

If you have an external stylesheet, put this rule at the end of it. [3]

Vacation Internationale provides a welcoming community for members who understand the importance of leisure travel. [4]

When you first arrive at CNN, use the tab key (in IE and Netscape, the “A” key in Opera) and watch the status bar at the bottom of the browser window. [...] If there are five or more navigation links and/or other content that comes before the main content of the page then the skip navigation technique should probably be used. [2]

All of our resorts offer condominiums, most with full kitchens, separate living and dining areas, and private balconies with breathtaking views. [4]

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor within the main content. [...] Another method seeks to strike a compromise between aesthetic appeal and accessibility utilitarianism. [1]

With headings navigation in a screen reader (usually the “H” key) you hear the section title and that is where you are; there is no need to press enter to get to the section. [2]

Sources:
[1] WebAIM: “Skip Navigation” Links (www.webaim.org/techniques/skipnav)
[2] Skip Navigation (jimthatcher.com/skipnav.htm)
[3] Day 11: Skipping over navigation links - Dive Into Accessibility (diveintoaccessibility.org/day_11_skipping_over_navigation_links.html)
[4] Vacation Internationale (www.vacationinternationale.com)

Leave a Reply

You must be logged in to post a comment.