Enhancing ARIA landmarks with aria-labelledby

ARIA landmark roles provide a useful way for screen reader users to navigate through web pages, and to understand the purpose of different sections of content on the page. With just a little bit more ARIA you can make landmarks even more helpful to blind and partially sighted people.

If you haven’t come across ARIA landmark roles before, you might find the following screen reader demo and articles worth a look:

Using ARIA landmark roles

Let’s take a typical situation. A web page that has two navigation blocks. You apply the appropriate ARIA landmark role to each containing element. The code might look something like this:

<nav role=”navigation”>
<p>Choose an aisle to browse:</p>
<ul>
<li><a href=”fresh.html”>Fresh foods</a></li>
<li><a href=”dairy.html”>Milk and dairy</a></li>

</ul>
</nav>

<nav role=”navigation”>
<p>Choose a shelf to browse:</p>
<ul>
<li><a href=”milk.html”>Milk</a></li>
<li><a href=”butter.html”>Butter</a></li>
<li><a href=”eggs.html”>Eggs</a></li>

</ul>
</nav>

By applying the landmark role you’ve made it easy for screen reader users to move from one landmark to the next.. Screen readers like NVDA, Jaws and VoiceOver include shortcuts for moving quickly between the landmarks on a page. In this case (depending on the screen reader) you’ll hear something like “Navigation region start” or “Navigation landmark”.

Using aria-labelledby

With just a little more ARIA you can make even more information available. With the above example there isn’t any way to tell what differentiates the two navigation blocks. Screen readers will report them both in exactly the same way, until you drill down into the content itself of course.

Using aria-labellebdy you can supplement the information available to screen readers. This creates an association between the <nav> element (or <div> if you’re using HTML4) and a piece of text elsewhere on the page. The effect is that screen readers will now announce “Aisle navigation region start” or “Shelf navigation region start”, or whatever the screen reader specific variation might be.

<nav role=”navigation” aria-labelledby=”firstLabel”>
<p>Choose an <span id=”firstLabel”>aisle</span> to browse:</p>
<ul>
<li><a href=”fresh.html”>Fresh foods</a></li>
<li><a href=”dairy.html”>Milk and dairy</a></li>

</ul>
</nav>

<nav role=”navigation” aria-labelledby=”secondLabel”>
<p>Choose a <span id=”secondLabel”>shelf</span> to browse:</p>
<ul>
<li><a href=”milk.html”>Milk</a></li>
<li><a href=”butter.html”>Butter</a></li>
<li><a href=”eggs.html”>Eggs</a></li>

</ul>
</nav>

This technique makes it a lot easier for blind and partially sighted people (with ARIA enabled screen readers) to do something very like visually scanning a page.

6 comments on “Enhancing ARIA landmarks with aria-labelledby”

Skip to Post a comment
  1. Comment by David Farough

    It seems to me that this may be a good way to supplementt the landmark roles in pages that are written in languages other than English. If your page is written using the French language, are the landmark roles translated appropriately? If not, Maybe this technique would help.

  2. Comment by Alan Dalton

    That’s a very useful article, Léonie. I’ll keep that in mind.

    Should developers use aria-labelledby for every landmark role, or should they only use aria-labelledby when a particular landmark role appears more than once on a webpage?

    Some landmark roles, such as banner, main, and contentinfo, would usually appear only once on a webpage. Would aria-labelledby ever be useful for those?

  3. Comment by Léonie Watson

    That’s an interesting suggestion David, and I think it could work.

    I believe screen readers report landmarks in their native language. Jaws for example reports the landmarks on this page as “Banner”, “Main”, “Navigation” and “Search”, switching only accent and pronunciation when the language of the page is changed. In other words it doesn’t seem to translate the landmarks themselves.

  4. Comment by Léonie Watson

    Thanks Alan.

    I’d be inclined to use this technique only when there are multiples of a landmark on the page. The only possible exception might be search. There could be a case for supplying a little extra information about the search facility perhaps.

  5. Comment by Léonie Watson

    Thanks Andrew.

    In the ARIA example above, the aria-labelledby attribute on the nav element shares a value with the ID of the span element in the following paragraph.

    As I understand it, aria-label takes a string value, and aria-labelledby takes one or more ID refs as values. The only other difference being that aria-labelledby should be used when the associated text is visible on the page, and aria-label when it isn’t.

    Curious if I’m missing something else though?

Comment on this post

Will not be published
Optional