Developers can label a list by using an
aria-labelledby on the containing list element (e.g.,
ul). Doing so will give the list an accessible name, which can be situationally helpful (more on that later).
Last I had checked (probably 6 months to a year ago at the time of this writing), labeling a list had sporadic support. But after needing to retest due to a recent discussion I was having, I realized results have largely improved, with a few outliers.
Labeling list results
aria-labelledby and even the
title attribute will often provide a
ol an accessible name:
<ul aria-label="I needed a name for some reason"> <li>...</li> <!-- ... --> </ul> <!-- As long as an aria-label or aria-labelledby attribute aren't used a title will provide a list an accessible name. If used with one of those attributes, the title provides a description. --> <ul title="Oh hi. Just cause I may be useful here, I'd still recommend you not use me, the title attribute. I'm a stinker."> <li>...</li> <!-- ... --> </ul>
The following browser and screen reader combos (latest versions of each as of May 2, 2020) announced the name of the list when navigating to the list with screen reader controls (e.g., virtual cursor using arrow keys, or jumping directly to the lists with quick keys).
- Chrome & Edge with VoiceOver, NVDA and JAWS.
- Firefox with NVDA, JAWS and TalkBack.
- macOS Safari with VoiceOver.
- iOS Safari & Edge with VoiceOver.
- IE11 with NVDA.
Name not announced
- Chrome with TalkBack.
- Edge with TalkBack.
- IE11 with JAWS.
Legacy Edge with desktop browsers.
Without getting into great detail, a list within a primary navigation likely doesn’t need an accessible name. A web page that contains multiple lists where there is ambiguity in what each list represents could be a candidate for receiving an accessible name. But a revised content structure (e.g., using a heading prior to the list) could also help remediate the ambiguity.
Note: I did not label any of the lists used in this post.
Hypotheticals aside, use your best judgment and ask real users for feedback on whether or not a named list would be helpful. Overuse of ARIA attributes, and filling up a page with unnecessary “help” (e.g., visually hidden text that tells screen reader users how to navigate a basic web page), has the potential to be just as frustrating as page devoid of accessible markup patterns.