Skip to main content

Make the most of ARIA landmark roles

This article first appeared in issue 238 of .net magazine – the world's best-selling magazine for web designers and developers.

A quick recap: ARIA landmarks describe the purpose of different areas of a page in a way that Assistive Technologies (ATs) can understand. Using the role="" attribute, you can define landmarks for navigation, search, main, banner, contentinfo and complimentary content areas. For example:

<body><div role="banner"></div><div role="navigation"><ul></ul></div><div role="main"><h1>Tequila</h1><p>Makes me happy…</p><div role="complimentary"></div></div><div role="contentinfo"></div></body>

ARIA landmark roles are helpful to screen reader users, because it’s possible to move between landmarks using a shortcut key, and because the landmark is announced automatically when it’s reached. Check out my screen reader landmarks demo:

Landmarks make it easy for blind people to tell which area of the page they’re on, but when you use the same landmark role multiple times on one page, screen readers can’t easily tell the difference between them. A page with two navigation blocks is a good example:

<div role="navigation"><p>Choose an aisle :</p><ul><li><a href="spirits.html">Spirits</a></li><li><a href="beer.html">Beer and lager</a></li></ul></div><div role="navigation"><p>Choose a shelf :</p><ul><li><a href="tequila.html">Tequila</a></li><li><a href="vodka.html">Vodka</a></li></ul></div>

When an ARIA aware screen reader encounters either one of those navigation blocks, it will announce something like ‘Navigation landmark’ or ‘Navigation region start’ (this varies depending on the screen reader). In other words a screen reader will announce the same thing for both navigation blocks.

What’s needed is a way to extend the landmark information in a way screen readers can understand. The aria-labelledby attribute makes it easy to do this. It associates a piece of text that’s already on the page with the <div> element. For example:

<div role="navigation" aria-labelledby="aisle"><p>Choose an <span id=”aisle”>aisle</span> :</p><ul><li><a href="spirits.html">Spirits</a></li><li><a href="beer.html">Beer and lager</a></li>…</ul></div><div role="navigation" aria-labelledby="shelf"><p>Choose a <span id="shelf">shelf</span> :</p><ul><li><a href="tequila.html">Tequila</a></li><li><a href="vodka.html">Vodka</a></li>…</ul></div>

But there may be times when it isn’t convenient to use a piece of text already visible on the page. In this case, the aria-label attribute can be used: it takes a string, rather than an ID ref like aria-labelledby. For example:

<div role="navigation" aria-label"aisle"><ul><li><a href="spirits.html">Spirits</a></li><li><a href="beer.html">Beer and lager</a></li>…</ul></div><div role="navigation" aria-label="shelf"><ul><li><a href="tequila.html">Tequila</a></li><li><a href="vodka.html">Vodka</a></li>…</ul></div>

Whether you use aria-labelledby or aria-label to enhance landmarks, ARIAaware screen readers will announce something like ‘Aisle navigation region’ or ‘Shelf navigation region’, and the experience becomes much more intuitive.

Discover 60 amazing examples of HTML5 at our sister site, Creative Bloq.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.