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:

These can be assigned with the role attribute, but all except search are automatically attached to specific HTML elements:

Providing landmarks to help navigation pretty much comes down to using the right HTML element. However, you may want to complement your <footer>,<nav>,<section> and <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:

Screenshot of the site homepage highlighting the position of the 5 landmarks

Clarifying duplicate landmarks

Some landmarks (main, especially, but banner and 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 Site and Languages navigation, making it clear where to go.

<nav aria-labelledby="languageSwitcherHeading" role="navigation">
  <h2 id="languageSwitcherHeading" hidden="">Languages</h2>
  <!-- ... -->

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.