Language

Language

Landmarks, also known as page regions, enable screen reader users to identify and navigate directly to important sections of a web page, skipping over blocks of content. Once you introduce landmarks, ensure all content on the page is included in a landmark as content outside a landmark can be easily missed.

You identify regions of the page with HTML5 sectioning elements or ARIA landmark role attributes.

Best practice for landmarks

  • Ensure all content on the page is contained within a landmark.
  • Use HTML5 sectioning elements (preferred) to identify regions on a page. Use ARIA landmark role attributes if HTML5 sectioning elements cannot be used.
  • Ensure only one instance of:
    • <header> as child of <body>, or role="banner". A <header> is not considered a banner when it is the child of <article>, <aside>, <main>, <nav> or <section>.
    • <footer>
    • <main>
  • Ensure these landmarks are direct children of <body>:
    • <header> (when the banner)
    • <footer>
    • <main>
  • Limit the use of <nav> to primary and secondary navigations.
    • Use the aria-label or aria-labelledby attribute to differentiate multiple <nav> items.
    • Use the aria-labelledby attribute to label a <nav> region that begins with a heading element.
    • Provide short and descriptive labels.
  • The landmark role is declared by a screen reader along with the name, if any. Do not use the landmark role (e.g., "navigation") as part of the name; for instance, the label is "Site" not "Site Navigation" for a navigation landmark.
  • Use role="search" rather than role="form" when the form is used for search functionality.
  • If the <form> element is named (using aria-label, aria-labelledby or title attribute), it will be designated as a landmark.
  • If you use role="form", provide a brief label (using aria-label, aria-labelledby or title attribute) that describes the purpose of the form.
  • If the <section> element is named (using aria-label, aria-labelledby or title attribute), it will be designated as a landmark.
  • If you use role="region", provide a brief label (using aria-label, aria-labelledby or title attribute) that describes the purpose of the content in the region.

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

WAI-ARIA Authoring Practices

Back to top