Rules

1. Landmarks are not required, but serve as one method of passing WCAG SC 2.4.1 - Bypass Blocks

Best Practices

1. Use HTML5 landmarks to provide meaningful structure to your page

Why are landmarks important?

Similar to headings, landmarks help screen reader users bypass blocks of content, identify page structure and important information.

How to annotate landmarks

1. Locate all sections within the page
2. Define each section of page using HTML landmarks

Note: Be consistent when defining landmarks across multiple pages

How to define landmarks

Note: Visit ARIA Landmarks Example to learn more about landmarks.

<!--Navigation HTML-->
<nav></nav>

<!--Navigation ARIA-->
<div role="navigation"></div>

<!--Header HTML-->
<header></header>

<!--Header ARIA-->
<div role="banner"></div>

<!--Main HTML-->
<main></main>

<!--Main ARIA-->
<div role="main"></div>

<!--Complimentary HTML-->
<aside></aside>

<!--Complimentary ARIA-->
<div role="complimentary"></div>

<!--Footer HTML-->
<footer></footer>

<!--Footer ARIA-->
<div role="contentinfo"></div>

https://codepen.io/josephyang/pen/GRyrLEB