A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
People with disabilities often navigate content without the use of a mouse. This makes navigating the content 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 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 using a hotkey sequence. Alternatively, a dialog containing a list of landmarks may be invoked from which users can jump directly to a selected landmark. Examples of available landmarks include (but are not limited to): banner, search, main, navigation, and region. Refer to the Web techniques section to learn more about the WAI-ARIA landmark requirements and how to implement them.
- Non-web documents and software should mark this checkpoint N/A. Many software user interface components have built-in mechanisms to navigate directly to / among them, which also have the effect of skipping over or bypassing blocks of content.
- Although not required by the checklist, being able to bypass blocks of content that are repeated within content directly addresses user needs identified in the Intent section for the WCAG Success Criterion, and is generally considered best practice.
Refer to Understanding SC 2.4.1 for more information (external link to WCAG).
Review the General techniques as well as other tabs applicable to your technology. Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.
Instructions: Each item in this section represents a technique or combination of techniques deemed sufficient for meeting this checkpoint.
Note: This checkpoint is not applicable to software applications except the rarely occurring set of software programs.
Grouping repeated content in a way that can be skipped
See technology tabs for techniques that can be used for grouping content.
Creating links to skip blocks of repeated material using one of the following techniques:
Instructions: In addition to the General techniques, any item in this section represents a technique or combination of techniques deemed sufficient. Using multiple techniques is encouraged, and techniques are ordered from most to least preferred. One of the first two techniques must be used when possible.
Group repeated content in a way that can be skipped.
- ARIA11: Using ARIA landmarks to identify regions of a page (see ARIA11 supplement) IN COMBINATION WITH:
- Using HTML5 structural elements (supplemental) IN COMBINATION WITH
- H69: Providing heading elements at the beginning of each section of content
- SCR28: Using an expandable and collapsible menu to bypass block of content
- H70: Using frame elements to group blocks of repeated material AND H64: Using the title attribute of the frame and iframe elements
- Grouping sets of links, using one of the following:
The following techniques, examples and comments provide additional information beyond that available in the WCAG techniques. Where items supplement existing techniques, they are numbered accordingly (e.g., ARIA11).
ARIA landmarks or HTML5 structural elements must be used where possible for all IBM applications. There are a number of requirements and recommendations to keep in mind when using landmarks:
- All content on the screen must be designated with an ARIA landrmark or region with no orphaned content.
- Landmarks and regions can be embedded within others, such as a search bar located in a banner.
- In a set of sibling DOM elements, only one each of the
contentinfolandmarks is permitted.
contentinforole is not permitted in a Web page without the presence of a
- Assign a WAI-ARIA
bannerrole to content that is common throughout a Web site
- If a search field is present, assign a WAI-ARIA
searchrole to the field.
- Avoid using the
The following provide some more detailed guidance on less frequent uses of landmarks. See the Aria Authoring Practices for additional guidance, including the related topic of structural roles such as
Assign a WAI-ARIA
complementary role 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">
Avoid using the
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
However, if the
application landmark is used, the following is required:
- Web applications defining
role="application"on any element, must handle all keyboard events for the element.
- All instances of non-decorative, static text within an element that has a
role="application"attribute must be separated by an element with a
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.
<title>Password Administration Application</title>
<div role="document" aria-label="password administration">
<p>This application may be used to administer your password.</p>
A label drawn from the content of the page using
aria-labelledby will be discoverable by more users than an non-visible use of
aria-label. As well, labels formed with
aria-labelledby will be readily translated when multiple languages are supported, while
aria-label is more likely to be overlooked during Translation Verification Testing (TVT).
- Elements having a role of
regionmust always be assigned a label, either with
- No label is required for landmark regions where the purpose is obvious from the role (e.g.,
- If an ARIA landmark or region is used multiple times on a Web page, each instance must have a unique label specified using
- Do not include the landmark type as part of the label text (e.g., use "site", not "site navigation"), since a screen reader will automatically announce the role
When none of the standard WAI-ARIA navigational roles are appropriate, apply the
region role to the area and label it using either
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 role="region" aria-labelledby="t1">
<h1 id="t1">Stock Ticker Portlet</h1>
HTML5 has introduced “sectioning” elements which correspond to several WAI-ARIA roles. If using these HTML5 elements, you no longer need to add the corresponding WAI-ARIA role to the element. See supplements for ARIA 11 and ARIA 13 for applicable considerations for the corresponding ARIA role.
|HTML5 element||Corresponding ARIA role|
Group links using
<ol> elements. Using style sheets, you can modify the appearance and remove the bullets.
When maps involve clickable arias, group links inside the
<map> elements. Assistive technology enables users to skip items in the map, such as navigation links, so that they can navigate quickly to the main content.
Instructions: In addition to the General techniques, each item in this section represents a technique or combination of techniques deemed sufficient for meeting this checkpoint.
Use headings to mark larger sections of the content.
Instead of providing extensive navigation inside the content, create a separate page with a navigation menu.
Allow the user to collapse the navigation when it is not needed.
Use container views to separate navigation and the main content. VoiceOver users can quickly navigate from one container to the other.
This checkpoint applies to a set of software programs. Because sets of software that meet this definition appear to be extremely rare, there are no specific Eclipse techniques for this checkpoint. Refer to the General techniques section.
This checkpoint applies to a set of software programs. Because sets of software that meet this definition appear to be extremely rare, there are no specific Windows-based (MSAA+IA2) techniques for this checkpoint. Refer to the General techniques section.
Most links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/
Copyright © 1994-2017 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.
Copyright © 2001, 2017 IBM Corporation