2

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>
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Jon M
  • 33
  • 4
  • Thank you for the edit suggestions Unor, I'm still gettign used to making the post more searchable so it can help others. – Jon M Jan 31 '17 at 15:44

1 Answers1

1

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:

  • "foo Button"
  • "list of 2 items"
  • "Step 1. Open fridge"
  • "Step 2. locate beverage"
  • "list end"
  • "bar Button"
slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Its a little different than what I am looking for, had to make a compromise with management to have them go with dropping "Step" from the list items so Jaws will actually read the list number. The CSS formatting to add "Step" in front of the number makes the screen reader look at it differently. – Jon M Jan 31 '17 at 15:47