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 by adding role="list" to the <ul> or <ol>, 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.

Subscribe

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. XHTML syntax is still worth using

    A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.

  2. Booleans in ARIA

    HTML booleans are bit quirky but, as if just to complicate things, booleans in ARIA work slightly differently. It’s worth knowing how and why.