revision:
They help to identify the high-level regions of the page. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology.
HTML allows to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users. With landmarks, blind users using a screen reader have the ability to jump to sections of a web page.
example: landmarks
<body>
<! -- banner landmark -->
<header>
<!-- navigation landmark -->
<nav>
</nav>
</header>
<!-- main landmark -->
<main>
<!-- search landmark -->
<form role="search">
</form>
</main>
<!-- contentinfo landmark -->
<footer>
</footer>
</body>
Landmarks help screen reader users with orientation on the page.
Screen reader users may jump from landmark to landmark using keyboard shortcuts.
Screen reader users may list all landmarks on a page and select them.
Sighted users may add a browser extension to jump to landmarks by using keyboard shortcuts.
header; ARIA role: banner; conditions: only in context of the body element, not when it's a descendant of "article", "aside", "main", "nav", or "section".
nav; ARIA role: navigation.
main; ARIA role: main.
section; ARIA role: region; conditions: when it has an accessible name using "aria-labelledby", "aria-label" or "title".
form; ARIA role: form; conditions: when it has an accessible name using "aria-labelledby", "aria-label" or "title".
form; ARIA role: search; conditions: with role="search".
aside; ARIA role: complementary.
footer; ARIA role: contentinfo; conditions: only in context of the body element, not when it's a descendant of "article", "aside", "main", "nav", or "section".
If there are multiple navigation landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".
If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.
Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.
There should be only one "banner" landmark.
There should be only one "contentinfo" landmark.
A document must not have more than one "main" element that does not have the "hidden" attribute specified. Having more than one visible "main" element can confuse users, because screen readers don’t announce the number of "main" elements.
If there are multiple "complementary" landmarks on a page, each should have a unique label ("aria-label" or "aria-labelledby").
If there are multiple "form" landmarks on a page, each should have a unique label ("aria-label" or "aria-labelledby").
Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <header></header> is sufficient; you don't need <header role="banner"></header>.
Most landmarks are well supported, but support may vary, especially with "form" landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a sound document outline.