||Landmarks must identify regions of content on the page according to the ARIA Landmark Roles specification.
- When ARIA landmarks are used to identify regions of content on the page, users of assistive technologies gain programmatic access to those regions through built-in navigation commands.
- Proper use of landmarks provides a navigable structure where common sections or features of pages can be easily accessed or, conversely, skipped over if they represent repeated blocks of content.
- If the appropriate landmark roles are NOT used, the type or purpose of each content region will be less obvious to users of assistive technologies.
- In the worst-case scenario, when NO landmark roles are present, the content on the page will be presented to users of assistive technologies as a single undifferentiated block.
- Visual styling of blocks of content are often good indicators of potential landmarks (e.g.
HTML4 Legacy Techniques
HTML5 and ARIA Techniques
|WCAG Success Criteria
1.3.1 Info and Relationships (Level A, Primary Success Criterion)
Elements with ARIA Landmark roles
- Use the appropriate landmarks to identify the different regions of content on a web page.
- The most important landmark roles are
navigation, as nearly every page will include at least those regions.
- Other commonly used landmark roles include
- Use HTML5 sectioning elements that have a default ARIA landmark role:
complementary) and in some situations
contentinfo). When using these elements, the
role attribute should NOT be defined.
- In HTML4 and XHTML 1.0 documents, a landmark can be created using a
div element with a
role attribute and the appropriate ARIA landmark role value (e.g.,
search role is typically placed on a
form element or a
div that surrounds the search form.
- When there are multiple instances of a particular landmark role on a page, provide a unique accessible name for each landmark with the same role to enable users to differentiate among them.
- An alternative landmark can be created in HTML5 by using the
section element, which has a default landmark role of
region, with an author-defined accessible name (e.g., using
aria-labelledby to reference a heading element).
- Do not nest landmarks with the same role (e.g., do not place navigation landmarks within a navigation landmark). Instead, use the
section element technique described above to provide additional subsections within a standard landmark.
- If a region on a page does not correspond to one of the defined ARIA landmark roles, the
section element technique described above can be used to create a landmark container for the content.
- View the accessible names of the landmarks on the page and verify that each uniquely describes the type of content the landmark contains.