Technique G123:Adding a link at the beginning of a block of repeated content to go to the end of the block

About this Technique

This technique relates to 2.4.1: Bypass Blocks (Sufficient when used for creating links to skip blocks of repeated material).

This technique applies to all technologies that contain links.

Description

The objective of this technique is to provide a mechanism to bypass a block of material by skipping to the end of the block. The first link in the block or the link directly preceding the block moves focus to the content immediately after the block. Activating the link advances the keyboard focus past the block. When there are multiple blocks to be skipped, the user skips from block to block via these links.

Examples

Example 2: A book index

A book contains an index that is divided into a set of pages. In the content at the beginning of each page of the index are links for each letter of the alphabet, linking into the index where the entries start with that letter. The first link in the set is titled "Skip Links into Index". A user activates this link to skip over the links.

Example 3: Several sets of links

All the pages on a Web site include a section containing links to the site map, information about the organization, and how to contact the organization. All the pages in each section of the site also contain a set of links to its subsections. The first link in the first block is titled "Skip Navigation Links" and skips over the first set of links. The first link in the second block is titled "Skip Section Links" and skips over the subsection links.

Example 4: HTML page with several blocks of navigation

This example demonstrates both the use of heading elements at the beginning of each section (H69) and links that skip to the end of each section. This allows people to skip blocks of repeated content using keyboard navigation or using heading navigation, depending on the capabilities of their user agents.

<a href="#content">skip navigation</a>
<h2><span id="main-label">Main</span> Navigation</h2>
<nav aria-labelledby="main-label">
  <ul>
    <li><a href="#subnav">Sub Navigation</a></li>
    <li><a href="/a/">Link A</a></li>
    <li><a href="/b/">Link B</a></li>
    <li><a href="/c/">Link C</a></li>
  </ul>
<nav>

<h2 id="subnav"><span id="sub-label">Sub</span> Navigation</h2>
<nav aria-labelledby="sub-label">
  <ul>
    <li><a href="#ultranav">Ultra Sub Navigation</a></li>
    <li><a href="/suba/">Sub A</a></li>
    <li><a href="/subb/">Sub B</a></li>
    <li><a href="/subc/">Sub C</a></li>
  </ul>
</nav>

<main id="content">
  <h1>Content title</h1>
  <p>Now that I have your attention...</p>
</main>

Related Resources

No endorsement implied.

Skip Navigation Links

Tests

Procedure

Check that a link is the last focusable control before the block of repeated content or the first link in the block.
Check that the description of the link communicates that it skips the block.
Check that the link is either always visible or visible when it has keyboard focus.
Check that after activating the link, the keyboard focus has moved to the content immediately after the block.

Expected Results

All checks above are true.

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.