Have you ever done a semantic html course? Or read about it? If you have, you might remember elements like
<section> or maybe
<aside>. But did you know that using these elements does not automatically provide the proper semantic meaning? Let's go on a journey of creating meaningful landmarks.
Landmarks help identify the way a web page is organised and structured. A page with well-placed landmarks can help assistive technology make sense of the structure of the page. It can also help building 'skip-links' for quick and efficient navigation through the page while maintaining context for the person browsing the page.
Traditionally, it was possible to explicitly add landmark roles to HTML elements by using the
<div role="main"> <h1>An old school title<h1> .... some amazing old school content .... </div>
Thankfully, with HTML5, we get HTML5 elements that can have an implicit landmark role.
<main> <h1>Sparkly new title<h1> .... some amazing new content .... </main>
These implicit landmark roles have rules though. Not every one of these HTML5 elements automatically gets the correct landmark role. It all depends on wether or not the element is implemented properly.
<aside>- has a
complementarylandmark role. It is meant to add supporting content to the main content.
<form>- can have a
formlandmark role, but only when it is identifiable with an accessible name. It can also have a
searchlandmark role if explicitly given
<header>- can have a
bannerlandmark role when used in the right context. This type of landmark role contains site-specific content or information.
<footer>- can have a
contentinfolandmark role, but only when used in a very specific way. Contentinfo is specifically the information usually found in footers like a privacy statement.
<main>- has a
mainlandmark role. It identifies the main content of the page, and each page should only have one.
<nav>- has a
navigationlandmark role. It identifies a group of links to navigate with.
<section>- can have a
regionlandmark role, but only when it has an accessible name.
As you can see above, everything has a specific use and proper implementation. For example, if you are using the
<section> element, it does not automatically add context to the page through an implicit landmark. You might have a nice structure like this:
<main> <h1>A wonderful title<h1> <section> <h2>A cute little header in this section</h2> ... awesome content ... </section> <section> <h2>A nice header in the second section</h2> ... more awesome content ... </section> </main>
This is great! But the only thing it says about the page is that there are two sections. It does not tell the visitor anything about the specific purpose of that section. Because of this, the section will not be seen as having a
region landmark role. It's just a container surrounding some elements.
What is a region?
A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
In this case, adding a unique label to each of these sections can help them become actual
regions. For example by using
If you want to know more about the specifics of landmarks, one resource that I really love is ARIA landmarks example. It has great quick and easy examples on how the different elements and landmark roles can, and should be used.