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">

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.


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.

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Join the Conversation


  1. Hi Ted,

    In ChromVox I found that the screen reader does not read aria-labelledby content until and unless the role is added. Also when there is only 1 list item the order of the screen reader changes. Please let me know how can we maintain the reading order in screen readers. Thanks in advance đŸ™‚


  2. I’m not surprised by inconsistencies. There’s mixed support when aria-label and aria-labelledby are used on non-interactive elements. Each screen reader/browser combination is also going to have its own quirks. Worry less about the order and focus on building web sites that accurately surface role, state, value, and label. Users will expect how their screen reader is going to announce the content.

  3. What do you think about the Voice Over assistant included in Mac OS. I tested it and looks that can not scan everything, or maybe I am doing a bad coding.

Leave a comment

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