A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
On this page:
Rationale
The purpose of this checkpoint is to provide more efficient navigation of content when using methods other than a mouse. This means being able to skip over repeated blocks of content like navigation links and frames.
Required development techniques
Compliance with this checkpoint requires all of the following techniques be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 2.4.1 (link resides outside of ibm.com).
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
2. Skip links: Create links to skip blocks of repeated material.
Examples for General developers
For techniques that have no technology-specific examples, refer to the HTML example section for guidance.
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
There are no specific general examples.
2. Skip links: Create links to skip blocks of repeated material.
To comply with this technique, WAI-ARIA examples 1, 2 and 3 must be implemented and at least one other example must be implemented.
Example 1
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
If navigation links are present, assign a WAI-ARIA navigation role to the element containing the links or to a heading that refers to the links. The following example uses a WAI-ARIA navigation landmark to allow screen reader users to navigate directly to the navigation area. The technique may be implemented by simply assigning a navigation role to the heading element.
Screen reader users navigate to landmarks using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.
<h2 role="navigation">Navigation</h2>
Example 2
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
If a search field is present, assign a WAI-ARIA search role to the field. The following example uses a WAI-ARIA search landmark to allow screen reader users to navigate directly to the search field. The technique may be implemented by simply assigning a search role to the field.
<input type="text" id="search" name="search" role="search" />
Screen reader users navigate to landmarks using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.
Example 3
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
Please refer to the WAI-ARIA Best Practices section: Providing Logical Layout Semantics using Structural Roles (link resides outside of ibm.com) for more information.
The following example uses a WAI-ARIA main landmark to enable screen reader users to go directly to the main content on a page. The technique may be implemented by simply assigning a main role to the main content element.
<h1 role="main">Main content heading</h2>
Screen reader users navigate to the main content using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.
Example 4
Add a link at the beginning of a block of repeated content to go to the end of the block. For example, each of the checkpoints in the web accessibility checklist contains a section called "On this page". A link could be added just before the "On this page" section that allows the user to skip over the links in the section. This would give a user the option to either listen to the links in the "On this page" section or to bypass them and move focus to the content after the repeated list of links.
Refer to WCAG 2.0 examples for links at the beginning of a block of repeated content (link resides outside of ibm.com) for more examples of this technique.
Example 5
Add links at the top of the page to each area of the content. For example, The w3.ibm.com website uses style sheets and html links to provide the ability for screen reader users to navigate to different areas of the web page without listening to the entire page. Links are provided to skip to main content, skip to navigation links and to skip to an index of portlets on the page. Style sheets are used to style the links so they are not visible until the user tabs to them.
<div><a href="#content-main">Skip to main content</a></div>
<div><a href="#left-nav">Skip to navigation</a></div>
...
<div><a href="#index">Jump to portlet page index</a></div>
Refer to WCAG 2.0 examples for links (link resides outside of ibm.com) for more examples of this technique.
Example 6
Use a visible text link to skip to the main content. The preferred way to add a skip to main content link is by making it visible. The next example uses a visible text link that is displayed at the top of the page instead of an image. The American Council of the Blind (ACB) (link resides outside of ibm.com) was the first to use this technique. This method makes the skip links usable for someone using the keyboard as well as someone using a screen reader.
<a href="#navskip">Skip Navigation Links</a>
...
<a name="navskip" id="navskip"></a> <h2> The main content...</h2>
Example 7
Use a spacer image to skip to the main content. Links that go directly to the main content of the page can be visible or invisible. One method is to have a link at the top of the page attached to an unimportant image such as a spacer image. The target of the image link is the beginning of the page's main content. Someone using a screen reader can activate the link and skip to the main content of the page and avoid listening to the navigation links.
In the following example, alternative text for a spacer image is "skip to main content". When a screen reader user hears "skip to main content", they activate the link and go directly to the main content on the page. This example is taken from the IBM Human Ability and Accessibility Center external Website.
<a href="#main"><img src="c.gif"alt="Skip to main content"></a><br /> ...<br /> <a name="main" id="main"></a><br /> <h1>Human Ability and Accessibility Center</h1>
Notice that the local anchor uses the id and main attributes. HTML parsers use the name attribute, while XML parsers will use the id attribute. Using both id and main attributes ensures the link will work for both cases.
Examples for HTML developers
For techniques that have no technology-specific examples, refer to the General example section for guidance.
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
To comply with this technique, at least one of the following examples must be implemented.
Example 8
Provide heading elements at the beginning of each section of content. Assistive technology provides the ability to navigate web pages by heading. This enables users to quickly scan the page to see the key topic areas when markup is used to identify the headings.
The following example shows heading markup on the Accessibility Center website. Style sheets are used to visually style the headings while the h2 element identifies the headings to assistive technology.
<h2 class="blue-dark">Enabling human capability through innovation</h2>
<p>The Human Ability and Accessibility Center.....</p>
....
<h2 class="bar-green-med-dark">In the spotlight</h2>
<p>Subscribe to the Showcasing Accessibility podcast.</p>
For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for providing heading elements (link resides outside of ibm.com).
Example 9
Use structural elements to group links. Grouping links provides a way for people using assistive technology to more easily skip the links and go to the main content they want to hear.
Group links using the ul and ol elements. This example uses an unordered list. Using style sheets, you can modify the appearance to remove the bullets.
<ul>
<li><a href="web.html">Web checklist</a></li>
<li><a href"software.html">Software checklist</a></li>
<li><a href="doccheck.html">Documentation checklist</a></li>
</ul>
Example 10
Group links using div elements. This technique is used on the w3.ibm.com website.
<div id="persistent-nav">
<a id="w3home" href="//w3.ibm.com/"> w3 Home </a>
<a id="bluepages" href="//w3.ibm.com/bluepages/"> BluePages </a>
<a id="helpnow" href="//w3.ibm.com/help/"> HelpNow </a>
<a id="feedback" href="//w3.ibm.com/feedback/"> Feedback </a>
</div>
Example 11
Group links using map elements. Assistive technology provides the ability to skip over items in the map, such as navigation links, so the user can get to the main content they want to hear.
Web checklist Software checklist Documentation checklist
<map name="checklist navigation">
<a href="web.html">Web checklist</a>
<a href"software.html">Software checklist</a>
<a href=" doccheck.html">Documentation checklist</a>
</map>
Example 12
If you are using frames, Refer to Using frame elements to group blocks of repeated material AND Using the title attribute of the frame element in the Frames checkpoint for examples of this technique.
Refer to WCAG 2.0 examples for using structural elements to group links (link resides outside of ibm.com) for more examples of this technique.
2. Skip links: Create links to skip blocks of repeated material.
There are no specific HTML examples.
Examples for Script developers
For techniques that have no technology-specific examples, refer to the General and HTML example sections for guidance.
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
To comply with this technique, at least one of the following examples must be implemented.
Example 13
Use an expandable and collapsible menu to bypass blocks of content. This technique allows users to skip repeated material by placing that material in a menu that can be expanded or collapsed under user control. The user can skip the repeated material by collapsing the menu. The user invokes a user interface control to hide or remove the elements of the menu. This is the technique used on this page and the other accessibility checklists to collapse the various sections (Rationale, Techniques, Testing etc).
For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for Using an expandable and collapsible menu to bypass block of content (link resides outside of ibm.com).
2. Skip links: Create links to skip blocks of repeated material.
There are no specific script examples.
Examples for Domino developers
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
To comply with this technique, at least one of the following examples must be implemented.
Domino Designer does not provide direct support to add heading elements, however they can be added using pass-thru HTML as shown in the examples below.
Example 14
Provide heading elements at the beginning of each section of content using pass-thru HTML.
Screen readers provide the ability to navigate Web pages by heading. This enables users to quickly scan the page to see the key topic areas when markup is used to identify the headings. Headings are defined at the beginning of each section using the h element.
- Type the heading tag. In this example we use h3 and h4.
- Type text for the heading.
- Select the heading tags and text.
- Go to Text - Pass-Thru HTML. Once selected, the pass-thru HTML is highlighted in gray. The Pass-thru HTML can also be defined by enclosing the heading and text in square brackets.
[<h3>Required development techniques</h3>]
....
[<h4>Examples of required techniques</h4>]
Example 15
Use structural elements to group links. For example, group links using the ul and ol elements. If lists are created using Text-List from the Designer menu, Domino automatically generates the list element tags.
2. Skip links: Create links to skip blocks of repeated material
To comply with this technique, at least one of the following examples must be implemented.
Example 16
Add links at the top of the page to each area of the content. The following example shows how to use pass-thru HTML in Designer to add links to navigate to different areas of this Web page. This technique is used on the Accessibility Center Website pages. Pressing the Tab key while the page is loading provides links to navigate to the main content or to the navigation links. Style sheets are used to style the links so they are not displayed until the user tabs to them. Note that the code for the links is enclosed in square brackets to indicate it is pass-thru HTML.
[<div><a href="#content-main">Skip to main content</a></div>]
[<div><a href="#left-nav">Skip to navigation</a></div>]
Example 17
Provide a link at the top of the page attached to an unimportant image.
The alternate text for the image is coded as alt="skip to main content". The target of the image link is the start of the main content on the page. When a blind user listens to the Web page with a screen reader, they hear "Skip to main content" and they can activate the link to move directly to the main content of the page. This technique is used at the IBM Human Ability and Accessibility Center Web site.
The following pass-thru HTML demonstrates how to add the link and the anchor for the main content. The alternate text for the image is read by a screen reader, but is not visible on the screen. Select the option to hide the code from Notes in the Text Properties box so the HTML is not displayed on the Notes client.
[<a href="#navskip"> <img src="blank.gif" alt="skip to main content"> </a>]
...
[<a name="navskip"></a>] Main page content...
Example 18
Provide a text link at the top of the page instead of an image. A textual skip navigation link is visible to sighted users and someone using a screen reader.
Provide an anchor for the main content which will be the target for the "skip to main content" link. The American Council of the Blind (ACB) (link resides outside of ibm.com) was the first to use this technique.
The following pass-thru HTML adds a text link which is displayed at the top of the page. Select the option to hide the code from Notes in the Text Properties box so the HTML is not displayed on the Notes client.
[<a href="#navskip"> skip to main content</a>]
...
[<a name="navskip"></a>] Main page content...
Examples for Information developers
For techniques that have no technology-specific examples, refer to the HTML example section for guidance.
1. Grouping material: Group blocks of repeated material in a way that can be skipped.
There are no specific examples.
2. Skip links: Create links to skip blocks of repeated material.
To comply with this technique, the following example must be implemented.
Example 19
To implement skip to main content in IBMIDDOC, use similar techniques as you would for HTML. This example shows the IBMIDDOC code you would use for an image link.
<mmobj>
<objref obj="1x1transparent">
<mmobjlink linkend="content"></mmobjlink>
<textalt>skip to main content</textalt>
</mmobj>
Place the link target at the beginning of the content as shown below.
<ph id="content"></ph>
DITA is used for authoring topic-based information. It is not used for authoring Web pages that include masthead, navigation, footer, and other regions. These topics will typically be included as content within a documentation delivery application (such as the Eclipse Help System) which handles these other interface regions. As a result, each individual topic page is not sufficiently complex enough to require the skip to main content technique. So, providing a skip to main content link is not required.
Recommended development techniquess
Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the application. See WCAG Additional Techniques (Advisory) for 2.4.1 (link resides outside of ibm.com) for a list of techniques and examples.
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result | |
|---|---|---|
|
Verify the following compliance criteria with a screen reader.
For detailed instructions on how to test this checkpoint with a screen reader follow the 'Screen reader accessibility verification tests for Web checklist 5.1' document |
Pass:
|
®2009 IBM Corporation
Last updated September 01, 2009.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.