Component Library

Landmarks

Issue Description

Landmarks can be used to simplify the navigation of complex Web sites for users of assistive technology. If the landmarks are not logical, they can make navigation more confusing instead.

  • Landmarks are missing or used incorrectly to indicate content regions.
  • Page does not contain landmarks.
  • A landmark is contained within another landmark region, but specifies that it should not be contained within another.
  • Content in the main page area is not nested under any landmark region, making navigating to it more difficult without shortcuts to reading the entire page content.
Recommendation

For each distinct section in the page, contain content within landmark regions. This allows screen reader users to navigate by section, similarly to navigating by heading, creating a simple page structure to organize content. Navigating a web page is far simpler for screen reader users if the content splits between multiple high-level sections. Use landmarks as bypass blocks to allow users additional navigation options.

  • Use native HTML5 landmark elements instead of ARIA roles where possible.
  • Use aria landmarks when remediating non-native HTML methods.
  • Banner landmark must not be contained in another landmark.

http://mcdlr.com/wai-aria-cheatsheet/