Landmarks must identify content regions

Rule ID Landmark 18
Definition Landmarks must identify regions of content on the page according to the ARIA Landmark Roles specification.
Purpose
  • 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. banner, main, navigation, contentinfo).
Mappings
  • HTML4 Legacy Techniques (Required)
  • HTML5 and ARIA Techniques (Required)
WCAG Success Criteria

1.3.1 Info and Relationships (Level A, Primary Success Criterion)

Other Related Success Criterion:

Rule Category Landmarks
Scope Element
Target Resources Elements with ARIA Landmark roles
  • aside
  • footer
  • header
  • main
  • nav
  • section
Techniques
  • Use the appropriate landmarks to identify the different regions of content on a web page.
  • The most important landmark roles are main and navigation, as nearly every page will include at least those regions.
  • Other commonly used landmark roles include banner, contentinfo, complementary and search.
  • Use HTML5 sectioning elements that have a default ARIA landmark role: main (main), nav (navigation), aside (complementary) and in some situations header (banner) and footer (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., role="main").
  • The 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.
Manual Checks
  • View the accessible names of the landmarks on the page and verify that each uniquely describes the type of content the landmark contains.
Informational Links