VoiceOver and list-style-type: none – Unfettered Thoughts

A bug that keeps hitting me at work is VoiceOver not announcing unordered lists properly when either the list-style-type is set to none or display is set to inline.

The expected behavior is that the unordered list is announced with a role of list along with the number of items, for example “list 4 items.” Lastly, “end of list” is announced after the last item to again let a user know that there are no more items in the list. For whatever reason, setting the list-style-type to none or setting display to inline on the <li>’s will strip this useful information.This is problematic, for me, because unordered lists are usually used for navigational items, like top-level navigation or side navigation. With most top-level nav, display: inline; is used for presenting a horizontal list of items, while list-style-type: none; is used to remove the bullets that render by default so you can have stylized list of links. You do this a lot, you know you do.

This is kind of a big deal to so I wanted to see if I could figure out a way to get it working right.

…

Curated by (Lifekludger)
Read full article at Source: VoiceOver and list-style-type: none – Unfettered Thoughts