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.
