0

I'm working on a project where accessibility is of prime importance. There's frequent reference to parts of an ordered list and I'm not sure how to mark it up.

I made have a jsfiddle demo of referencing an ordered list with CSS Counters that I would like to implement, but I'm not entirely sure how accessible it is. I'm getting mixed results from my own research.

I would like to use the HTML5 feature, but the decimal aspect is important.

If I marked it up with screen-reader only tags (ie <li><span class="sr-only">3.5<span> ... </li>) then it's likely that the numbers will be double read. Of course, I'm also worried about them not being read at all...

Is there a best practice surrounding this challenge?

MCTaylor17
  • 411
  • 5
  • 16
  • 2
    Test, test and test: on Windows you can test with NVDA (free software) and on OS X with VoiceOver. JAWS license forbids a developer to use it for test purpose even if it'll work for 40 minutes (do whatever you want with this. I don't test with JAWS). EDIT: VoiceOver on iOS may have different results than on OS X and on Android you've TalkBack – FelipeAls Nov 21 '14 at 11:21

1 Answers1

1

I tested your jsfiddle with NVDA in Firefox and it read every list item the way I would expect. I agree with FelipeAIs that you should test with other screen-reader software too as they vary a lot in their interpretation.

MDN shows browser support for counter CSS going back as far as IE8: https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

If you find that only some screenreaders are picking it up, try using the start attribute as a fallback.

stringy
  • 1,323
  • 7
  • 16
  • Thanks for running the test stringy. I'm definitely concerned about WCAG failure F87 regarding use of the :before and :after pseudo-elements. Do you think the start attribute is enough of a fallback? – MCTaylor17 Dec 02 '14 at 19:24
  • I think so, I think it's fairly robust and well supported. (sorry for not replying sooner!) A different fallback would be to mention that the lists are in decimals before the list starts - sort of as a just-in-case heads up for non-sighted people. It's a bit difficult to slip in that kind of detail subtly, but if there's already an explanation of where to find content it might work there :) – stringy Jan 08 '15 at 10:29