This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara
Developers can label a list by using an aria-label or aria-labelledby on the containing list element (e.g., ol, or 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
Using aria-label, aria-labelledby and even the title attribute will often provide a ul or 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).
Name announced
- 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.
Not tested:
Legacy Edge with desktop browsers.
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 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.
This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara
Scott O'Hara | Sciencx (2020-05-02T00:00:00+00:00) Results of labeling lists. Retrieved from https://www.scien.cx/2020/05/02/results-of-labeling-lists/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.