A11y tips: use landmarks
Tags: a11y, tips, html
Published: 2022-01-19 08:23:41

Even if the usage of landmarks [is in continuous decline](https://webaim.org/projects/screenreadersurvey9/#landmarks) among users of assistive technologies, **they are still a very used resource for navigation**, and if they are not used more often it may be due to the improper usage that we, developers, tend to make of them.

Landmarks are used to **define specific regions** within the structure of our HTML. Remember that **all content should be included within a landmark**, except, if you like, [the skip link](https://dev.to/carlosespada/a11y-tips-add-a-skip-link-222m#:~:text=the%20skip%20link%20can%20be%20located%20outside%20of%20any%20landmark).

Landmarks have an implicit role, so in theory [it is not necessary](https://www.w3.org/TR/html-aria/#h-note) to assign it unless they are repeated in the document. On this subject [there are contrary opinions](https://www.tempertemper.net/blog/implicit-aria-landmark-roles) that advocate declaring it explicitly to ensure compatibility with any browser. These are some of the most used:

- [`<header>`](https://dev.to/carlosespada/html-tags-header-2f84) (`role=”banner”`)
- [`<main>`](https://dev.to/carlosespada/html-tags-main-422k) (`role=”main”`)
- [`<aside>`](https://dev.to/carlosespada/html-tags-aside-48hp) (`role=”complementary”`)
- [`<footer>`](https://dev.to/carlosespada/html-tags-footer-3of5) (`role=”contentinfo”`)
- [`<nav>`](https://dev.to/carlosespada/html-tags-nav-p4d) (`role=”contentinfo”`)

## `<header>`

If, in addition to the main header, it is used more than once in the document to mark the header of other areas (eg: `<section>` or `<article>`), **it must be indicated** that the main header has a `role="banner"` to set it apart from the others.

`<header role="banner">` **can only appear once** in each document.

## `<main>`

By identifying the main content of the page **only one can be used in each document**. It must exist in a mandatory way, there may be pages that are missing any other landmark but all of them **must always have a single** `<main>` element.

## `<aside>`

To know if a content has to go in an `<aside>` we can ask ourselves the following two questions: _Is this content complementary to the main one being at the same hierarchy level? Can it be separated from it and still make sense?_ If the answer is yes in both cases, then it is an `<aside>`.

## `<footer>`

If, in addition to the main footer, it is used more than once in the document to mark the footer of other areas (eg: `<section>` or `<article>`), **it must be indicated** that the main footer has a `role="contentinfo"` to set it apart from the others.

`<footer role="contentinfo">` **can only appear once** in each document.

## `<nav>`

It can appear several times in the same document, since it is used to mark important blocks of navigation (eg: main menu, footer sitemap...), but it should not be used excessively to mark each small group of links.

If it appears more than once, add an `aria-label` attribute to the `<nav>` that identifies what type of navigation it represents, for example:

```
<nav aria-label="Main">
<nav aria-label="Sitemap">
```

Avoid the role of the landmark as part of the value of `aria-label`. For example, a `<nav>` will be announced with the word "_Navigation_" at the end, so if we use an `aria-label="Main navigation"` it will be announced as "_Main navigation Navigation_", which is redundant. If we just use `aria-label="Main"` the user will just hear "_Main Navigation_", which is nicer.

## `role="search"`

Although the default role of an HTML element should not be changed, this is a particular case that arises from the agreement between specs writers and screen reader developers, so that users of assistive technologies can jump directly to the site's search form if we use this:

```
<form role="search">
```

These are just some of the landmarks at our disposal, but to get to know them all in depth there is a lot of interesting information [in the corresponding section](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html) of the W3C page.