Use aria-labelledby to provide context to unordered lists

VoiceOver announces the heading when the list is selected

VoiceOver announces the heading when the list is selected

It’s not uncommon for a web page to include multiple sets of lists. This is especially true for a web site that aggregates information. The Yahoo! Finance home page contains at least 12 lists.

Screen readers allow the user to navigate a page via lists and announce the number of items in each list. But what if we could make this navigation more relevant? This can be done via the aria-labelledby attribute.

There are many examples of using aria-label or aria-labelledby on a list when combined with the navigation landmark. These lists have special semantic value. They are more than a set of links, they provide a critical navigation component for the web site.

There’s also the concept of a region landmark, which defines a module or specific area on the page that provides a specific purpose. A good example of this would be a module that allows the user to log into the web site.

This article is about the more pedestrian list, which happens to be labeled with an h3. With just a bit of effort, we can give our users much more contextual information when they are navigating the page via lists mode.

Unconnected lists

The following lists are preceded by a header, but they are not connected.

Top Dog Breeds

  • Beagle
  • Labrador Retriever
  • Cocker Spaniel

Top Cat Breeds

  • Persian
  • Rex
  • Tabby
  • All American Mix

Top Guinea Pig Breeds

  • American
  • Teddy
  • Peruvian

Connected Lists

The following lists are connected to their headers via the aria-labelledby attribute.

Top Cakes

  • Red Velvet
  • Coconut
  • Angel Food

Top Cookies

  • Peanut Butter
  • Sugar
  • Chocolate Chip

Top Pies

  • Apple
  • Peach
  • Pecan

The code for this is very simple. The h3 has an id and the ul has an aria-labelledby attribute that matches the headers id value. There’s no visual impact.

<h3 id="toppies">Top Pies</h3>
<ul aria-labelledby="toppies">
  <li>Apple</li>
  <li>Peach</li>
  <li>Pecan</li>
</ul>

Screen Reader Results

Within this post, we have 6 list items. Screen readers should describe the first three by the number of list items. The connected lists should be announced by the heading, giving the user more context. I have not tested this yet in all screen reader/browser combinations, so there may be some variation in support.

The following video shows VoiceOver’s announcement of the basic and enhanced lists. You’ll notice that this minor enhancement in the code can make a great user impact.

Support

Scott Vinkle has put together a test page and support grid for screen readers and browsers.


Not all screen readers are announcing the heading text when navigating to the lists. However, the pattern has graceful degredation and non-supporting assistive technology continues to announce the lists by the number of list items and possibly the first item.

Leave a Reply

Your email address will not be published. Required fields are marked *