Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately.
I have created a jsfiddle demo showcasing referencing an ordered list with CSS Counters, but I am unsure about its accessibility. My own research has yielded mixed results.
I would like to utilize the HTML5 feature, with the decimal aspect being crucial.
If I were to use screen-reader only tags (e.g.,
<li><span class="sr-only">3.5<span> ... </li>
), it is possible that the numbers will be read twice. However, I am also concerned that they may not be read at all...
Is there a recommended best practice for addressing this challenge?