Results of labeling lists (and list items!)

Developers can specify an aria-label or aria-labelledby on the containing list element (e.g., <ul>, <ol> or <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. In other words, it’s probably a really bad idea to add an accessible name to a list item unless you can absolutely verify there are no negative side effects for your particular use case. Negatie side effects would include the name not being announced - thus the content you’re trying to expose is not available. Or, the name overwrites the visible content, which may not be what you’re tyring to do at all.

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-label, 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 title for naming is not “bad”, but is not as well supported.
• List items often ignore names provided by ARIA or title.
  • When title was recognized on list items, even though the list item had subtree text, the title contributed to the name, which was unexpected.
• Naming list items would result in VoiceOver announcing those list items as named “group” elements.

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.

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.