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.
@ted_drake Seems like VoiceOver and JAWS have the best support. I did some tests and documented here: http://t.co/tTFWEFc6do
— Scott Vinkle (@svinkle) July 25, 2015
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.