3.9 Identify groups of related links and provide a way to bypass them

Organise lists of links according to the logical structure of the site or web page. Assign headings and subheadings for each list of links and until user agents (web browsers, screen readers, etc.) are capable of automatically detecting and skipping over long lists of unwanted links, provide a way for the user to do this themselves.

A user agent is a piece of software for accessing Web content. User agents could be desktop graphical browsers, text browsers, voice browsers, mobile phones, multimedia players, plug-ins, and some software assistive technologies used in conjunction with browsers such as screen readers, screen magnifiers, and voice recognition software.

Rationale

A navigation bar is often the first thing presented on a page. Screen reader users have to listen to this over and over again, for every page until they get to the unique content. Providing a way to skip over repetitive links to allow users to start reading at the beginning of the main body of the page improves efficiency.

Some screen readers provide an option to skip links that are the same on subsequent pages, However, the functioning of this option is at best hit and miss, so it is better to provide for it proactively. Skip links are useful for people who navigate with the keyboard, including laptop users and users with limited dexterity who can't use a mouse. Providing skip links saves them the hassle of having to use the tab key to negotiate long lists of links.

Grouping links into logical structural groups helps all users by providing content overviews of key sections of the site or on a longer web page.

Directions and Techniques

Consider whether to visually show or hide skip links

If you do decide to make the skip link option visible, place it in the most unobtrusive place possible. For example, consider putting the skip links on the top right rather than the top left, as this is easier to ignore for people who don't want or need to use it.

If you decide to hide the skip links, you can use a single pixel "invisible" gif with the anchor tag and suitable alt text to provide a "hidden" link that will be identified by a screen reader but not to a sighted user. This is easy to implement and has little impact on the page.

Provide a style sheet that allows users to hide the set of navigation links

Taking advantage of style sheets will allow you to present users with the option to show or hide skip links or groups of navigation links, depending on their needs. See WAI recommended techniques for hiding links with stylesheets