Issue #16 - Landmarks
published onHTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.
<body>
<!-- banner landmark -->
<header>
<!-- navigation landmark -->
<nav>
</nav>
</header>
<!-- main landmark -->
<main>
<!-- search landmark -->
<form role="search">
</form>
</main>
<!-- contentinfo landmark -->
<footer>
</footer>
</body>
Benefits
- 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.
Landmarks
Element | ARIA role | Conditions |
---|---|---|
header | banner | Only in context of the body element, not when it's a descendant of <article> , <aside> , <main> , <nav> , or <section> . |
nav | navigation | |
main | main | |
section | region | When it has an accessible name using aria-labelledby , aria-label or title |
form | form | when it has an accessible name using aria-labelledby , aria-label or title |
form | search | with role="search" |
aside | complementary | |
footer | contentinfo | Only in context of the body element, not when it's a descendant of <article> , <aside> , <main> , <nav> , or <section> . |
Tips
Here are some tips for using landmarks:
- If there are multiple
navigation
landmarks on a page, each should have a unique label (aria-label
oraria-labelledby
).<body>
<header>
<nav aria-label="Primary"></nav>
</header>
<footer>
<nav aria-label="Secondary"></nav>
</footer>
</body> - 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 thehidden
attribute specified. Having more than one visible<main>
element can confuse users because screen readers don’t announce the number ofmain
elements. - If there are multiple
complementary
landmarks on a page, each should have a unique label (aria-label
oraria-labelledby
). - If there are multiple
form
landmarks on a page, each should have a unique label (aria-label
oraria-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.
Resources
Did you enjoy this tip?
Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.