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-type:none and whether you declare it for
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:
|NVDA 2011.2 (IE9)||Yes||Yes||Yes||Yes|
|NVDA 2011.2 (FF6)||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.
- Previous post: Block level links and accessibility
- Next post: How to move VirtualBox machines to another hard drive