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).
This paragraph appears generically in all checkpoints. 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 sectioning 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 equivalent HTML5 sectioning and regional 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 landmark 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.
- Note that the
applicationrole is no longer a landmark.
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
is added to the element that encompasses the element(s) containing the weather
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
With the release of ARIA 1.1,
application ceased to be a landmark
role, because it does not share the same navigational purpose of the other
landmarks. It is now strictly used for document structure. Notwithstanding
that change, the advice offered for role of
application is similar.
It 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
application role is used, you must follow the
latest ARIA specification.
A label drawn from the content of the page using
be discoverable by more users than an non-visible use of
As well, labels formed with
aria-labelledby will be readily
translated when multiple languages are supported, while
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.,
formelements intended to be interpreted as landmarks must 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
region role to the area and label it using either
Two region landmark examples are presented below. An
labels one of the regions, and an
aria-labelledby labels the
<div role="region" aria-label="weather portlet">
<div role="region" aria-labelledby="t1">
<h1 id="t1">Stock Ticker Portlet</h1>
HTML5 has added sectioning elements which, together with some existing region elements, 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|
When using the HTML5
form element as a landmark region, a label
must be used. The label should normally be in the form of an
and be associated with the
form element using
aria-labelledby. Note that this guidance applies to the
element, not the individual elements inside a form, such as
Group links using
Using style sheets, you can modify the appearance and remove the bullets.
When maps involve clickable arias, group links inside the
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.
Many 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-2019 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University ). All Rights Reserved.
Copyright © 2001, 2019 IBM Corporation