Web checklist

Checkpoint 2.4a: Navigational features

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.


Rationale

People with disabilities often navigate content without the use of a mouse. This makes navigating the Web page more tedious when there is repeating information, such as links and search bars that are in the tab order. When repeated interactive content is organized into logical groups and a means is provided to navigate to the different blocks, navigation as a whole becomes much more efficient.

Navigation for screen reader users becomes much more efficient when WAI-ARIA landmarks are implemented. Screen reader users may navigate sequentially through landmarks via a hotkey sequence. Alternatively, a dialog containing a list of landmarks may be invoked from which users can jump directly to a selected landmark. The available landmarks are: main, search, navigation, application, banner, complementary, contentinfo, form, and region (used appropriately). See the technique 2 to learn more about the WAI-ARIA landmark requirements and how to implement them.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques including the ARIA examples in technique 2. These techniques are defined in WCAG 2.0 Level A Success Criterion 2.4.1 (link resides outside of ibm.com).

  1. Grouping material: Group blocks of content that are repeated on multiple Web pages in a way that can be skipped.
  2. Skip links: Create links to skip blocks of content that are repeated on multiple Web pages.

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. Grouping material: Group blocks of content that are repeated on multiple Web pages in a way that can be skipped.

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

    HTML example 1

    Provide heading elements at the beginning of each section of content. Assistive technology gives users the ability to navigate Web pages by heading. This enables users to quickly scan the page for key topic areas when markup is used to identify the headings.

    The following example shows heading markup on the Accessibility Center Web site. Style sheets are used to apply visual style to 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 additional information, refer to the WCAG 2.0 examples of providing heading elements at the beginning of content (link resides outside of ibm.com).

    HTML example 2

    Use structural elements to group links, so that people using assistive technology can easily skip the links and navigate to the main content they want to hear.

    Group links using <ul> and <ol> elements. The example below shows an unordered list. Using style sheets, you can modify the appearance and 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>

    HTML example 3

    Group links using <map> elements. Assistive technology enables the user to skip items in the map, such as navigation links, so that they can navigate quickly to the main content.

    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>

    HTML example 4

    If you are using frames, refer to Checkpoint 2.4c: Frames for examples of this technique.

    For additional information, refer to the WCAG 2.0 examples for using structural elements to group links (link resides outside of ibm.com).

    Required unit tests for HTML development technique 1

    Perform the following unit tests using a Web syntax analysis tool or a screen reader

  2. Skip links: Create links to skip blocks of content that are repeated on multiple Web pages.

    For each functional area of the application, a WAI-ARIA navigational landmark must be specified by assigning an ARIA role to the functional area. All content on the screen must be designated with an ARIA role with no orphaned content. Navigational areas can be imbedded within others, such as a search bar located in a header.

    Note: When none of the standard WAI-ARIA navigational roles ,including document structure and landmark roles, (HTML examples 5 through 13) can be applied to an area of a Web page, apply the region role to the area and label it using either aria-label or aria-labelledby. See HTML example 15.

    Note: If a specific navigational role in examples 5 through 16 is used multiple times on a Web page, each instance must have a unique label specified using aria-label or aria-labelledby.

    Note: HTML5 has introduced “sectioning” elements which correspond to several WAI-ARIA roles. If using these HTML5 elements, you must also add the appropriate WAI-ARIA role to the element and follow any associated requirements in the HTML examples for this checkpoint.

    HTML example 5

    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 adding a role="main" attribute to the <div> element that contains the main content.

    <div role="main">Main content heading</div>

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

    Note 2: The HTML5 <main> element corresponds with WAI-ARIA role=”main” (e.g., <main role=”main”> ).

    HTML example 6

    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 enable screen reader users to navigate directly to the navigation area. The technique may be implemented by adding a role="navigation" attribute to the <div> element that contains navigation links.

    <h2 role="navigation">Navigation</h2>

    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 help the user navigate to different areas on a page.

    Note 1: The HTML5 <nav> element corresponds with WAI-ARIA role=”navigation” (e.g., <nav role=”navigation”> ).

    HTML example 7

    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 enable screen reader users to navigate directly to the search field. You can implement this technique by simply adding a role="search" attribute to an element.

    <div role="search"> <label for="search">Search</label><input type="text" id="search" name="search" /> </div>

    HTML example 8

    An application landmark should only apply to an entire region of the page that has a collection of UI components that form an application for which all keyboard handling is solely handled by the application. Since Assistive Technologies recognize widgets and pass keyboard control to them, there is seldom a need to use role="application".

    However, if the application landmark is used, the following is required:

    HTML example 9

    Assign a WAI-ARIA banner role (i.e., banner landmark) to content that is common throughout a Web site.

    For example, a company's logo and a search field are positioned at the top of each page of a Web site. The search field is used to search the Web site's content. On each page, the WAI-ARIA role="banner" attribute is added to the element that encompasses the banner and search field elements.

    <div role="banner">
    <div>
    banner content
    </div>
    <div role="search">
    <label for="search">Search: </label>
    <input type="text" id="search" name="search">
    </div>
    </div>

    Note 1: Only one banner role in a set of sibling DOM elements is permitted.

    Note 2: The HTML5 <header> element corresponds with WAI-ARIA role=”banner” (e.g., <header role=”banner”> ).

    HTML example 10

    Assign a WAI-ARIA complementary role (i.e., complementary landmark) to content that complements the main content.

    Elements that have a role="complementary" attribute contain content that complements the main content, but remains meaningful when separated from the main content. For example, a Web site designed to advertise a running event describes the race and supports online enrollment for the event. A region of the event's Web page contains the local weather forecast, so runners will know the weather conditions on the event day. The WAI-ARIA role="complementary" attribute is added to the element that encompasses the element(s) containing the weather information. An aria-labelledby attribute is added to the element to provide a visible label.

    <h1 id="weather">Local weather forecast</h1>
    ...
    <div role="complementary" aria-labelledby="weather">
    ...
    </div>

    Note 1: The HTML5 <aside> element corresponds with WAI-ARIA role=”complementary” (e.g., <aside role=”complementary”> ).

    HTML example 11

    Assign a WAI-ARIA contentinfo role (i.e., contentinfo landmark) to a region that contains information about the parent document.

    For example, copyright and privacy information is placed at the bottom of a Web page. The WAI-ARIA role="contentinfo" attribute is added to the element that encompasses the element(s) containing the copyright and privacy information.

    <div role="contentinfo">
    <div>
    copyright content
    </div>
    <div>
    privacy statement
    </div>
    </div>

    Note 1: Only one contentinfo node in a set of sibling DOM elements is permitted.

    Note 2: A contentinfo role is not permitted in a Web page without the presence of a main role.

    Note 3: The HTML5 <footer> element corresponds with WAI-ARIA role=”contentinfo” (e.g., <footer role=”contentinfo”> ).

    HTML example 12

    Apply a form role (i.e., form landmark) to an element to make it easier for a screen reader user to locate a group of elements that, when combined, create a form.

    <h1 id="acctSignUp">Signup for a no-fee checking account</h1>
    <div role="form" aria-labelledby="acctSignUp">
    <label for="firstName">First name: </label>
    <input type="text" class="input" id="firstName">

    </div>

    Note 1: When possible, use native HTML elements in forms.

    Note 2: The WAI-ARIA role="search" attribute must be used on search widgets, not the role="form" attribute.

    HTML example 13

    Assign a WAI-ARIA article role to an area of a page that contains information which may stand-alone. For example, each comment in a wiki discussion thread may contain an article role. Other examples where an article role may be applicable are newspaper and magazine articles embedded in a Web page.

    <div role="main" aria-label="developing accessible Web pages">
    ...
    <div role="article" aria-label="WAI-ARIA best practices">
    ...
    </div>
    </div>

    Note 1: Elements having a WAI-ARIA article role must have a label specified with aria-label or aria-labelledby.

    Note 2: The HTML5 <article> element corresponds with WAI-ARIA role=”article” (e.g., <article role=”article”> ).

    HTML example 14

    Elements having a WAI-ARIA group role must have a label specified with aria-label or aria-labelledby. For example, a group role may be used to form a collection of related child elements in a tree or menu widget.

    <div role="tree" aria-label="fruits and vegetables">
    <ul role="group" aria-label="fruits">
    <li role="treeitem">apple</li>
    <li role="treeitem">orange</li>
    </ul>
    <ul role="group" aria-label="vegetables">
    <li role="treeitem">broccoli</li>
    <li role="treeitem">green beans</li>
    </ul>
    </div>

    HTML example 15

    WAI-ARIA roles in examples 5 through 13 are required to mark their respective functional page regions. If the roles in examples 5 through 13 do not apply to a specific portion of a page, apply a region role to that portion of the page.

    Two region landmark examples are presented below. An aria-label attribute labels one of the regions, and an aria-labelledby labels the other region.

    <div role="region" aria-label="weather portlet">
    </div>



    <div role="region" aria-labelledby="t1">
    <h1 id="t1">Stock Ticker Portlet</h1>
    </div>

    Note 1: A region role must be labeled using either aria-label or aria-labelledby.

    Note 2: The HTML5 <section> element corresponds with WAI-ARIA role=”region” (e.g., <section role=”region”> ).

    HTML example 16

    All instances of non-decorative, static text within an element that has a role="application" attribute must be separated by an element with a role="document" attribute. The following example shows a role="application" attribute inside a <body> element followed by a role="document" attribute inside a <div> element that encompasses static text.

    <html>
    <head>
    <title>Password Administration Application</title>

    </head>
    <body role="application">
    <div role="document" aria-label="password administration">
    <h1>Administer password</h1>
    <p>This application may be used to administer your password.</p>
    </div>

    </body>
    </html>

    Note: A document role must have a label specified with aria-label or aria-labelledby.

    HTML example 17

    Provide a skip to main content link. Refer to the HTML examples in Checkpoint 2.4b: Navigate to main content for details.

    HTML example 18

    Add a link at the beginning of a block of repeated content that allows users 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. You could add a link just before the section that allows the user to skip the links in the section. This would give a user the option to either listen to the links in the section or bypass them and move on to the content that follows.

    For additional information, refer to the WCAG 2.0 examples of creating a link that allows users to skip to the main content (link resides outside of ibm.com).

    HTML example 19

    Add links at the top of the page that allow the user to get to each area of the content. For example, the w3.ibm.com Web site uses style sheets and HTML links to enable screen reader users to navigate to different areas of the Web page without listening to the entire page. Links allow users to skip to the main content, navigation links, or index of portlets on the page. Style sheets are used to apply a style to the links, so that they are not visible until the user tabs to them.

    Note: The skip-to-main content link is listed first to enable users to easily navigate to the main content area of the Web page, as required by Checkpoint 2.4b: Navigate to Main.

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

    For additional information, refer to the WCAG 2.0 examples of adding links to the top of a Web page (link resides outside of ibm.com).

    Required unit tests for HTML development technique 2

    Perform the following unit tests using a Web syntax analysis tool or a screen reader.

    Note for iOS platform: Many of the following tests cannot be performed on an iOS device. Therefore, test with a desktop browser using the “view source” function or the Firefox Firebug add-on.


Script examples

  1. Grouping material: Group blocks of content that are repeated on multiple Web pages in a way that they can be skipped.

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

    Script example 1

    Use an expandable and collapsible menu to bypass blocks of content. This technique allows users to skip repeated material when that material is in a menu that the user can expand or collapse. The user can skip the repeated material by collapsing the menu or they can invoke a user interface control to hide or remove elements of the menu.

    For additional information, refer to the WCAG 2.0 examples of using a menu to allow users to bypass blocks of content (link resides outside of ibm.com).

    Required unit tests for Script development technique 1

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

  2. Skip links: Create links to skip blocks of content that are repeated on multiple Web pages.

    There are no examples for implementing this technique with scripts. Use the HTML examples as a guide.


IBM® Lotus® Domino® examples

  1. Grouping material: Group blocks of content that are repeated on multiple Web pages in a way that can be skipped.

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

    Lotus® Domino® Designer does not provide direct support for adding heading elements to HTML content. However, they can be added using pass-thru HTML, as shown in the examples below.

    Domino example 1

    Provide heading elements at the beginning of each section of content using pass-thru HTML.

    Screen readers allow users to navigate Web pages by heading. This enables users to quickly scan the page for key topic areas, but only when developers use markup to identify the headings. As demonstrated in the steps below, headings are defined at the beginning of each section using the <h3> and <h4> elements.

    [<h3>Required development techniques</h3>]
    ....
    [<h4>Examples of required techniques</h4>]

    Domino example 2

    Use structural elements to group links. For example, group links using the <ul> and <ol> list elements. If you create lists by selecting Text > List from the Designer menu, Domino automatically generates the list elements.

    Required unit tests for Domino development technique 1

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

  2. Skip links: Create links to skip blocks of content that are repeated on multiple Web pages.

    To comply with this technique, you must implement HTML WAI-ARIA examples 5 – 16, as well as Domino example 3 or one of the Domino examples in Checkpoint 2.4b: Navigate to main content examples.

    Domino example 3

    Add links at the top of the Web page that allow the user to get to each area of the content. The pass-thru HTML example below can be used in Designer to add links to navigate to different areas of a Web page. The IBM Accessibility Center Web site demonstrates the use of this technique. When a user presses the Tab key while the page is loading, links appear that allow them to navigate to the main content or to the navigation links. Style sheets are used to apply styles to 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.

    Note: The Skip to main content link must be listed first so that the user can skip over the navigational links, as required by Checkpoint 2.4b: Navigate to main content.

    [<div><a href="#content-main">Skip to main content</a></div>]
    [<div><a href="#left-nav">Skip to navigation</a></div>]

    Required unit tests for Domino development technique 2

    Manually perform the following unit test.

    Confirm that the top of the page has skip links that allow you to skip to each area of the content.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

The recommended development techniques for this checkpoint are as follows:

  1. Skip links: Create links to skip blocks of content that are repeated on multiple Web pages.

    For recommended development examples 1 and 2, instead of generating special strings to label landmarks with aria-label, provide users who rely on landmarks with labels that are consistent with what appears in the UI by using aria-labelledby to programmatically associate a landmark with existing, visible, labeling elements.

    Recommended development example 1

    Prefer aria-labelledby over aria-label on a main landmark if a visible label, such as a heading, is present.

    In the following example, a WAI-ARIA main landmark is labeled with an aria-labelledby attribute that references a visible HTML heading.

    <h1 id="weather">Weather portlet</h1>
    <div role="main" aria-labelledby="weather">
    ...
    </div>

    Recommended development example 2

    Prefer aria-labelledby over aria-label on a complementary landmark if a visible label, such as a heading, is present.

    In the following example, a WAI-ARIA complementary landmark is labeled with an aria-labelledby attribute that references a visible HTML heading.

    <h1 id="weather">Weather portlet</h1>
    <div role="complementary" aria-labelledby="weather">
    ...
    </div>

Refer to the WCAG Additional Techniques (Advisory) for Success Criterion 2.4.1 (link resides outside of ibm.com) for more techniques and examples.


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