11. 11
    Define Landmark Regions of a web page using ARIA roles
    3m

Define Landmark Regions of a web page using ARIA roles

InstructorErin Doyle

Share this video with your friends

Send Tweet

Landmark regions are used by screen readers to make it easier for users to navigate the content on the page by defining the structure of the page. Tools like the Rotor in VoiceOver rely on landmark regions to provide users with the ability to skip directly to the desired section of the page. We can do this either using HTML5 landmark elements or <div> elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other.

The following are ARIA roles for landmark regions:

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search
  • application

References

  • https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
  • https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
  • https://www.w3.org/TR/html-aria/#docconformance