| CARVIEW |
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 1: Skip navigation links
The pages on an organization's website 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.
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 website 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.
Related Techniques
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.