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.
Top comments (4)
I can answer the “why are the use of landmarks in decline” question, because developers dont use them properly! It’s the good old chicken and egg scenario, they aren’t useful as they aren’t used properly so people stop using them so people think they aren’t important etc.
I have started telling people they are an essential part of SEO as then they pay attention to them lol! (Not a complete lie, just an exaggeration! 😜🤣).
Great write up as always ❤️🦄
Hahaha, the old trick of using SEO to improve accessibility, well played 😉
Totally agree with what you say, I don't know what started before, if the lack of usefulness or the little attention we paid to it, I would bet on the second and that the first came as a consequence. In any case, we developers only have one left option, which is to do our job the best we can and, as it should be, users choose what is most useful to them.
Thank you very much for your comments, they are always more than welcome 🙂
Great article. Even though I read about them and used them a lot, I still learned new things to apply to my code.
Thank you, Moaaz, I'm glad you find them useful. For me it's the same, I'm learning a lot writing these articles, there is always room for improvement 🙂