# Adding a link at the beginning of a block of repeated content to go to the end of the block

ID: G123

Technology: general

Type: Technique

## When to Use

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

### Skip navigation links

The pages on an organization's Web site include a navigation bar or main menu containing links to major sections of the site, the site map, information about the organization, and how to contact the organization. The first link in this area is titled "Skip Navigation Links". A user activates the link to skip over these links.

### 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.

### 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.

### 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>

## Tests

### Procedure

1. Check that a link is the last focusable control before the block of repeated content or the first link in the block.
2. Check that the description of the link communicates that it skips the block.
3. Check that the link is either always visible or visible when it has keyboard focus.
4. 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.

## Related Techniques

- G1
- G124

## Resources

- Skip Navigation Links