Web checklist

Checkpoint 2.4b: Navigate to main content

Methods are provided for skipping over navigation links to get to the main content of the page.


Rationale

Keyboard-only users, especially those who use a screen reader, benefit from the ability to skip over navigational links and Web page header information to get directly to the main content. This allows the user to easily navigate to the main content and have the screen reader begin reading from that point.

Required development and unit test techniques


To comply with this checkpoint, you must meet the following technique.

  1. Navigate to main: Provide a method to skip over navigational links to get to the main content of the Web page.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

At this time WAI-ARIA examples are only fully supported in Firefox version 3.6 or later and version JAWS 12 or later. If your product needs to be accessible in Internet Explorer and mobile Safari/VoiceOver, one or more of the required HTML/CSS specific techniques must be implemented, as well as a WAI-ARIA technique. When WAI-ARIA becomes an approved W3C recommendation and Internet Explorer and mobile Safari/VoiceOver fully support it, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint.

Applications that provide WAI-ARIA landmarks must add the following statement to the navigation checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver. Keyboard access to WAI-ARIA landmarks is enabled via the Firefox WAI-ARIA Landmarks extension.

HTML examples

  1. Navigate to main: Provide a method to skip over navigational links to get to the main content of the Web page.

    To comply with this technique, you must implement at least example 1 or 2 when older browsers must be supported, such as Internet Explorer™ version 7 and earlier or Firefox® earlier than version 3, since these versions have no WAI-ARIA support. For all other versions of these browsers, you must implement one of the following examples to comply with this technique.

    HTML example 1

    Use a spacer image to apply a skip to main content link. 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. Set the target of the image link to the beginning of the page's main content. By using a skip to main content link, screen-reader users do not need to listen to the remainder of the navigational links or other unimportant content in order to reach the main content.

    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's external Web site.

    <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 enables the link to work for both cases.

    HTML example 2

    Use a visible text link to skip to the main content. The following example uses a visible text link that displays at the top of the page instead of an image. The American Council of the Blind (ACB) was the first to use this technique. This method makes the skip links usable for both keyboard and screen reader users. If the Web content has a group of navigational links at the top of the Web page, ensure that the skip to main link is listed first.

    <a href="#navskip">Skip Navigation Links</a> ... <a name="navskip" id="navskip"></a> <h2> The main content...</h2>

    HTML example 3

    Add a WAI-ARIA main role that navigates to the main content area. 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</h1>

    Note 1: If multiple main roles are used on a Web page, each instance must have a unique, visible label specified with aria-labelledby.

    Note 2: Only one main role in a set of sibling DOM elements is permitted.

    Required unit test for HTML development technique 1

    Perform the following unit test using a web syntax analysis tool or a screen reader.

    Using an HTML syntax analyzer confirm no violations are reported for a missing skip to main link. No manual techniques are required to test this technique.


IBM® Lotus® Domino® examples

  1. Navigate to main: Provide a method to skip over navigational links to get to the main content of the Web page.

    To comply with this technique, you must implement one of the following examples.

    Domino example 1

    Provide a link at the top of the page attached to an unimportant image.

    The alternative 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 on the IBM Human Ability and Accessibility Center Web site.

    The following pass-thru HTML example demonstrates how to add the link and anchor for the main content. A screen reader reads the alternative text for the image, but the text is not visible on the screen. Select the option to hide the code from Lotus® Notes® in the Text Properties box, so that the Notes client does not display the HTML.

    [<a href="#navskip"> <img src="blank.gif" alt="skip to main content"> </a>]
    ...
    [<a name="navskip"></a>] Main page content...

    Domino example 2

    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 accessible to screen reader users. Provide an anchor for the main content that becomes the target for the "skip to main content" link. The American Council of the Blind (link resides outside of ibm.com) (ACB) was the first to use this technique. If the Web content has a group of navigational links at the top of the Web page, ensure that the skip-to-main link is listed first.

    The following pass-thru HTML adds a link that will display at the top of the page. Select the option to hide the code from Lotus Notes in the Text Properties box, so that the Notes client does not display the HTML.

    [<a href="#navskip"> Skip to main content</a>]
    ...
    [<a name="navskip"></a>] Main page content...

    Required unit tests for Domino development technique 1

    Refer to the required unit tests for HTML development technique 1.


©2013 IBM Corporation

Last updated January 1, 2013.

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.