Accessible foundations - Landmarks
Headings are not the only way to help people navigate through the content of a page. The page design (usually) visbily separates the different areas of the page: that bit's the header, here is the main content, over there's the navigation... Some very useful information, that can also be conveyed to assistive technology users.
This is the job of ARIA (Accessible Rich Internet Applications) landmarks. The ARIA specification allows to define a role for the elements on the page. This role then conveys what the element is to assistive technology. Those landmarks are specific roles identifying relevant areas of the page:
mainto wrap the main content
bannerfor what's more commonly called the site's header
contentinfofor what's more commonly called the site's footer
complementaryfor enclosing complements to the main content, like in a sidebar for example
navigationto wrap, well..., navigation links
searchfor forms and more specifically search forms for the second
regionfor generic regions of the page that don't fit any of the previous ones
These can be assigned with the
role attribute, but all except
search are automatically attached to specific HTML elements:
<header>, unless it's inside an
<article>or another landmark
<footer>, unless, it's inside an
<article>or another landmark
<form>, if it is has an accessible name
<section>, if it has an accessible name
Providing landmarks to help navigation pretty much comes down to using the right HTML element. However, you may want to complement your
<aside> with the appropriate role to make up for the compatibility issues uncovered by Scott O'Hara.
A little inventory
Despite its simplicity, this site (at the time of the writing) offers 5 landmarks to speed up navigation:
mainarea where the content of articles and pages gets inserted by the static site generator
bannerwith the site
navigation, as well as the language
contentinfowith some extra links (maybe I should introduce a
navigationthere too to reach the links to my accounts on other sites)
Clarifying duplicate landmarks
Some landmarks (
main, especially, but
contentinfo too) should only be there once on the page. Others, like
navigation for which it happens often, might appear multiple times. Listing "Navigation" for each of them won't be much help for users.
In such situation, it's important to provide an accessible name to each landmark. For example, the site and language navigation are given a different name using
aria-labelledby pointing to a hidden
h2 in each of them (more likely to be translated OK than
aria-label). This results in them being preceived respectively as
Languages navigation, making it clear where to go.
<nav aria-labelledby="languageSwitcherHeading" role="navigation"> <h2 id="languageSwitcherHeading" hidden="">Languages</h2> <!-- ... --> </nav>
Providing an accessible name is also what will turn a
<section> or a
<form> into a landmark.
Checking the landmarks
Similarly to when checking headings, digging into the source looking for tags or
role attributes is not going to be fun. The Landmarks extension for both Firefox and Chrome can grab a list of them for us, much better.
The Axe extension can also check a few things, like ensuring that there is a unique
main landmark or that all content is within landmarks.
And giving a peek at what screen readers detect is also a good option. Especially with Mac, Windows 10 and Ubuntu coming with one built in, and NVDA freely installable on Windows.
Alongside a correct heading structure, landmarks are really helpful to guide users to the content they're after. There is one more accessibility related feature I'd like to discuss in the next article, and then it'll be back to the static site generator.