Skip to main content

Accessibility issues when removing list markers

Posted in Accessibility, CSS and Development

If we remove the visual list markers from an ordered or unordered list with list-style-type: none;, we’re likely to run into some issues with VoiceOver, Apple’s screen reader software.

You’d think that when the user reaches a list, VoiceOver would:

  1. announce the list
  2. state the number of items
  3. step through each item in turn, counting as it goes
  4. announce the end of the list

That happens when the list has bullets or numbers, of course, but if those visual markers are removed, VoiceOver, not unreasonably, does likewise when it reads the list out. In other words, Apple decided that if something doesn’t look like a list—even if it’s marked up as a list—it shouldn’t be read as a list.

It would never have been too much of an issue if lists were used sparingly, but us web developers love a list, which can get very noisy for screen reader users. With so many lists, and some that don’t even look like lists, Apple’s call starts to make sense.

The solution

There are bound to be occasions when you want a list to be read out properly on VoiceOver but visual list markers don’t make sense. An in-line navigation group is be a good example, where a screen reader user would find it useful to know how many items they had to go through, but bullets would look odd, with those items all in a row.

Scott O’Hara offers a solid HTML-based solution, but if CSS is the culprit, the fix should also be with CSS, which is where the real fix comes in:

li {
list-style-type: none;
}

li:before {
content: "\200B";
}

VoiceOver views a zero-width space (\200B) as a valid bullet character, so it happily reads all of the the list information, even though it doesn’t look like a list. It could be argued that this is a hack, but, equally, the VoiceOver behaviour could be seen as a bug.

Consider your lists carefully

The lesson here is to be more deliberate with our lists. Not everything that consists of multiple items is necessarily a list. And if something definitely is a list, carefully consider if it’s actually a good idea to remove the markers.

Sometimes a list—rightly—makes it through that scrutiny and out into the wild, which is where that CSS fix comes in handy.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Custom unordered list markers, done right

    Did you know you can choose any icon you like for unordered/bulleted lists with a single line of CSS? Any Unicode character; no hacky CSS!

  2. Styling list markers the right way

    Simple list styling like changing the bullets’ colour has always felt like a hack, involving a lot of CSS. But now there’s a proper way to do it!