Results of labeling lists (and list items!)
Developers can specify an
aria-labelledby on the containing list element (e.g.,
<menu>). Doing so will give the list an accessible name, which can be situationally helpful. Additionally, the ARIA spec presently allows for list items (
role=listitem and thus
<li> elements) to be named as well. As of recent testing, doing this is quite spotty in support, and has the potential to obscure the list items’ contents.
Since originally writing this post back in 2020, which I’m surprised I did anything mildly useful during that year at all at this point, support for features may have shifted. The original results I had posted here were rather straight forward and little on detail (again 2020). So, now more nuanced results are provided. Please do read more to find out.
Labeling list results
As mentioned, one can use
aria-labelledby and even the
title attribute to give a list or list item an accessible name:
<ul aria-label="I needed a name for some reason"> <li aria-label="results may vary">...</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 title="what the heck will I do?">...</li> <!-- ... --> </ul>
Testing Results (updated 2022)
The following CodePen embed contains two test cases for testing naming of lists and list items. The major highlights:
- Lists generally have good support for naming - if using ARIA, except on Android and iOS. Use of
titlefor naming is not “bad”, but is not as well supported.
- List items often ignore names provided by ARIA or
titlewas recognized on list items, even though the list item had subtree text, the
titlecontributed to the name, which was unexpected.
- Naming list items would result in VoiceOver announcing those list items as named “group” elements.
See the Pen naming lists by Scott (@scottohara) on CodePen.
Naming lists, situationally helpful
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 that ambiguity.
Naming list items seems a dubious practice which may have legitimate use cases… but lack of wide support for doing so either means people need to care enough about this to open bugs and get browsers and AT to respect the naming of these items, or one might want to rethink why they need to name a list item, and if maybe a different design or content strategy is really what’s necessary.
I did not provide an accessible name for any of the lists used in this post.
Hypotheticals aside, use your best judgment and ask users for feedback on whether or not a named list would be helpful. Overuse of ARIA attributes, and naming elements which don’t really need to be named can add extra aural cruff to an otherwise straight forward web page. Best to ask your actual users what they prefer.