Screen Reader not reading bullets and CSS for ordered lists
I have been converting job aids from Word docs to HTML and I am having a few issues with the screen reader I am using (Jaws 16). The ordered list I have set with CSS to present as "Step 1", "Step 2". The screen reader however does not recognize this and does not read the "Step 1" part of the list.
Is there a way to do this or am I looking at something a little more manual to have the screen reader call out whats needed correctly?
ol{list-style-type: none; counter-reset: elementcounter; padding-left: 0;}
li:before{content: "Step " counter(elementcounter) ". "; counter-increment:elementcounter; font-weight: bold;6px}
<ol>
<li>Open fridge</li>
<li>locate beer</li>
</ol>
I tried both JAWS 18 (latest release) and JAWS 16. Both work in Firefox and Chrome but neither in Internet Explorer.
( Note: your original example had '6px' just floating in your style sheet. I'm guessing it was a font-size property but I just left it out in my example.)
<style>
ol
{
list-style-type: none;
counter-reset: elementcounter;
padding-left: 0;
}
li:before
{
content: "Step " counter(elementcounter) ". ";
counter-increment:elementcounter;
font-weight: bold;
}
</style>
<button>foo</button>
<ol>
<li>Open fridge</li>
<li>locate beverage</li>
</ol>
<button>bar</button>
I put buttons before and after the list so I'd have tab stops for my test. Since your lists are not tabbable, I just tabbed to the FOO button first then used the virtual PC cursor to down arrow to the next elements. This is what I heard with JAWS in FF and Chrome: