Use ARIA landmarks for significant content components that a user is likely to want quick access to and provide meaningful labels for each.
- Use landmark roles to identify key content components [WCAG 1.3.1]
- Provide meaningful labels for each landmark [WCAG 1.3.1]
ARIA landmarks are used with web sites to allow users to identify and quickly move between the different primary regions of a page: site headers and footers, search boxes, advertisements, and the main content area.
The landmarks found on a page are compiled by AT into a list of links. Users are expected to be able to quickly scroll through the landmarks in order to orient themselves to the page and access the specific section of content they are looking for.
While publications are typically structured such that each document only contains the text of a single section or chapter, landmarks still play an important role in allowing users access to key components within one of these major regions (e.g., to quickly access notes, a glossary, learning objectives, practice problems, sidebars, or interactive widgets).
Not every section of content in a publication needs to be a landmark, or should be. Landmarks should be reserved only for key sections that the user might need to access quickly. A user is more likely to appreciate being able to reach a glossary, for example, than have a listing of every section and subsection.
The DPUB-ARIA module contains the following landmark roles for publications:
The following navigation roles are also landmarks:
In addition, the following roles in the core ARIA specification are landmarks:
Frequently Asked Questions
- Does every chapter/section need to be a landmark?
Landmarks should not be used as an alternative table of contents as the heading structure of the document is not preserved. Try to limit the use of landmarks to the components within the page that a user would otherwise have to manually search for. Creating too many landmarks forces users to hunt through a long list.
If the user wants to move by section heading or peruse the table of contents, options are already available to do so. Only identify the major section(s) of content within a document, if necessary (i.e., the chapters or top-level sections, not every subsection).
- Why should landmark names be unique?
When there is more than one type of the same landmark in a document, providing unique names avoids confusion about which particular one is being accessed. Ideally, the title of each component will make clear its purpose, but if the same name is reused for each (e.g., multiple "practice problem" sidebars), a unique identifier would improve the usability. The identifier should be something helpful, such as the subsection the component belongs to or the page it is found on in a print addition.
- What is the difference between ARIA landmarks and EPUB's landmarks/guide?
ARIA landmarks are compiled for individual web pages, so they do not persist from one document to the next. As EPUB publications consist of many documents, reading systems need an effective way to locate key content across the entire publication. EPUB's landmarks (EPUB 3) and guide (EPUB 2) were designed to solve this problem of landmarks spread across many documents.
For maximum interoperability, it is recommended to provide both types of landmarks.
- Should I use the
If a label is not available in the text, preference should always be given to the
aria-labelattribute. It is given higher precedence in the calculation of accessible names for elements and controls and
titlehas a history of poor support.
- Why can't I use the
landmarkrole is what the WAI-ARIA specification refers to as an abstract role. It is not meant to be implemented directly, but used as the top-level definition from which the roles you can use inherit.
For landmarks without a specific role, the
regionrole can be used with an meaningful label.
- Why does
asiderequire a label but not
Due to the general misuse of
sectionelement like its a
div, the element does not have a default role.
As a result, the following example is not a landmark, even though there is a heading:
<section> <h2>Section 3.1.1 — Elephants on Parade</h2> … </section>
If you assign a label to the element, however, it assumes the role of
regionand becomes a landmark:
<section aria-labelledby="s311"> <h2 id="s311">Section 3.1.1 — Elephants on Parade</h2> … </section>
asideelement has the implicit role of
complementaryso requires a label. For more information about the implicit roles of HTML elements, refer to the ARIA in HTML document.
- Why can't I use landmarks on element X?
Some HTML elements are restricted in what roles they accept to prevent overriding necessary semantics.
In particular, the
bodyelement has the special role
documentwhich cannot be overridden by any other role.
Complete information about what roles are allowed on what elements is provided in the ARIA in HTML document.