OpenA11y Evaluation Library

Landmarks must identify content regions

Rule ID Landmark 18
Conformance Required
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).
Conformance Required
WCAG Success Criteria

Success Criterion 1.3.1 Info and Relationships

Other Related Success Criterion:

Rule Category Landmarks
Rule Scope Element
First Step no
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.
Information Links