Screen readers, list items and list-style:none

It’s more or less common practice these days to use real HTML lists when what you’re marking up makes logical sense as a list. If you don’t want it to look like a standard ordered or unordered list, that’s easy to fix with a bit of CSS. The underlying semantics will still be there for people using browsers without CSS support or screen readers.

But will it? The short answer is no, not always.

Browsers that do not support CSS at all (or have it turned off) will display ordered and unordered lists with no problems. But with screen readers the situation seems to be rather hit-or-miss. The content of list items will always be announced, but in several cases the list items themselves will not be announced.

I’ve made a list item demo page that has four lists—two ordered (ol) and two unordered (ul) lists. I’ve used CSS to remove the list markers from one list of each type by setting the list-style-type property to none (whether you use list-style:none or list-style-type:none and whether you declare it for ol, ul or li doesn’t matter). Many would expect that screen readers would still announce the list items, especially for ordered lists, regardless of which CSS is applied to them. This is not always the case.

In my testing, Voice Over and Orca both stop announcing list items for numbered lists when list-style:none is applied. NVDA does too, but only when you use it with Firefox. If you use NVDA with IE, the list items are announced as expected.

The scenario is similar for unordered lists, but some screen readers don’t announce list items (i.e. by saying “bullet” or similar) at all, list-style:none or not.

Here’s a summary of the tests I have done:

Screen reader announcement of list item markers
Screen reader ol ol, no markers ul ul, no markers
NVDA 2011.2 (IE9) Yes Yes Yes Yes
NVDA 2011.2 (FF6) Yes No Yes No
Orca Yes No Yes No
VoiceOver Yes No Yes No

Whether or not this is actually a problem for screen reader users depends on the situation, of course. In many cases it probably is not a major usability issue, but I can definitely imagine that it’s useful to know which list item is currently being announced (or that you’ve entered a new list item). This is especially true for ordered lists or long lists.

In my opinion this is a case where screen readers take “screen reading” a bit too literally. Or, as may well be the case, browsers applying CSS too liberally before exposing item states and properties to screen readers through their accessibility APIs. I think in most cases screen reader users would benefit if list-style:none was ignored, or at the very least configurable to be ignored.

Whatever the reason, as a developer it surely doesn’t hurt to be aware that list items often are not announced as such by screen readers.

Posted on September 14, 2011 in Accessibility, CSS