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

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

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

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.

Required unit tests for HTML development technique 1

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

Identify blocks of content that are repeated.

Confirm that links are grouped using one of the following:

Structural elements

Div

Maps

Frames

Confirm that each section starts with a meaningful heading.

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.

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.

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.

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:

A WAI-ARIA application landmark must have a label specified with
aria-label
or
aria-labelledby.

Web applications defining
role="application"
on any element, must handle all keyboard events for the element.

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.

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.

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.

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.

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.

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.

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

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.

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.

Script examples

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.

Required unit tests for Script development technique 1

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

Identify blocks of repeated material in the content and confirm that there is an expandable and collapsible menu that can be used to bypass blocks of content. The menu must also be accessible using only a keyboard.

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

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.

Add a heading element to your HTML. For this example, we will use <h3> and <h4>.

Enter text for the heading.

Select the heading elements 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.

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.

Use the HTML examples above to test this technique.

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

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.

Required unit tests for Domino development technique 2

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:

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.