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?
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.