A11y tips: use landmarks

Even if the usage of landmarks is in continuous decline 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.

Landmarks have an implicit role, so in theory it is not necessary to assign it unless they are repeated in the document. On this subject there are contrary opinions that advocate declaring it explicitly to ensure compatibility with any browser. These are some of the most used:

• <header> (role=banner)
• <main> (role=main)
• <aside> (role=complementary)
• <footer> (role=contentinfo)
• <nav> (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 of the W3C page.