Define Landmark Regions of a web page using HTML5 sectioning elements

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. We should prefer HTML5 to ARIA roles when possible.

The following are HTML5 elements for landmark regions:

• article
• aside
• header
• footer
• main
• nav
• section

References

• https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
• https://www.a11ymatters.com/article/intro-html5-sectioning-elements/
• https://www.w3.org/TR/html-aria/#docconformance