Safari vs. Unstyled Lists
Is the role="list" workaround still needed?
Code
Yesterday, Hidde de Vries asked:
If you could fix 3 bugs in assistive tech or browsers, to make building accessible UI components more straightforward, what would they be?
Two & three took me a while, but the first issue that came to my mind was the need to add role="list" to unstyled lists in Safari, because they otherwise lose their semantics and are announced as plain text in VoiceOver. Apparently, I was not the only one.
For those who want to learn more about the issue, it occurs on lists that have their bullets or other indicators removed, e.g. with list-style: none, which can be quite a few. I found out about this years ago when reading “Fixing” Lists by Scott O’Hara. As he mentions in his article, the issue goes back to at least 2017, when Gerard K. Cohen first wrote about it, but it is probably with us since forever.
While it sure is a minor issue, one that can be solved with a little bit of otherwise unnecessary code, it is one that bugs me the most on my own site. To add insult to injury, if you run code with these fixes applied through an HTML validator, it will happily tell you there is no need to add role="list" to lists, because the role is implied.
Well.
All this made me wonder if this was still a thing in the latest version of Safari. To find out, I’ve created a CodePen that allows me to quickly test it myself. Sure enough, the bug is still there in Safari 15. Here’s hoping that future me will be able to come back to this article and add an update stating the issue has been resolved.