JAWS screen reader continues reading other elements after tabbing to first element on page

Question

I am building an Angular application and are having some issues with accessibility support for Jaws in IE 11.

My page looks similar to this:

<div id="start-tabbing-from-here" aria-label="Press tab to begin" tabindex="-1"></div>
<h1 tabindex="0" aria-label="Some title">Some title</h1>
<p tabindex="0" aria-label="Some text">Some text</p>
<button tabindex="0" aria-label="Btn1">Btn1</button>
<button tabindex="0" aria-label="Btn2">Btn2</button>
<button tabindex="0" aria-label="Btn3">Btn3</button>
<button tabindex="0" aria-label="Btn4">Btn4</button>

When I am sure the page elements have loaded i 'focus' on the #start-tabbing-from-here id using JQuery.

The intention is that once the user starts tabbing the user will move through the elements in page order. I.e: First focus is on 'Some title' on next 'tab' it moves to 'Some text' all the while reading aloud the content for each element.

In Chrome (linux/windows/mac) as well as Safari on Mac I get the expected behaviour.

In IE something really strange is going on: On first tab it starts reading through not only the first element but all of the elements in page order. I.e. JAWS will read: 'Some title some text Btn1 ...' and then suddenly it will 'reset' starting from the first element and then read that aloud one final time.

In essence what will happen is this: User tabs once and focus moves to 'Some title'. JAWS then reads aloud: "Some title some text Btn1 Btn2 Some title" and then it will stop reading and the page will start to behave as I would expect.

It seems to me like the 'reset' happens at a fixed point in time or after reading a specific number of words. E.g. If I change my the content of my elements to:

<div tabindex="-1" id="start-tabbing-from-here">
 <h1 tabindex="0" aria-label="Some title">Some title</h1>
 <p tabindex="0" aria-label="Some longer text that is here">Some longer text that is here</p>
 <button tabindex="0" aria-label="Btn1">Btn1</button>
 <button tabindex="0" aria-label="Btn2">Btn2</button>
 <button tabindex="0" aria-label="Btn3">Btn3</button>
 <button tabindex="0" aria-label="Btn4">Btn4</button>
</div>

JAWS may read: 'Some title Some longer text that Some title'.

I am really baffled by this behaviour and are not quite sure where to start debugging. I'm really hoping for some input! :)

Answer 1

On page load, JAWS tends to read the page from top to bottom. If you move the focus to a specific element when the page loads, JAWS will likely read the page from that point to the bottom. This is expected behaviour, and most users will know how to stop JAWS from reading. It's a bad idea to give everything a tabindex as in your examples. It means that all keyboard users, whether or not they use a screenreader, must tab through a lot of static elements to get to the link, button or form element they want to interact with, which can be painful for users with RSI or similar conditions. It also doesn't help blind users, as JAWS and other screenreaders have built-in reading and navigation keystrokes and users don't tend to rely on the Tab key. It's best to give users the ability to move the focus to the beginning of the unique content by providing a skip link at the top of the page that moves focus to the H1 heading. If it doesn't fit with your design, you can hide it until the user tabs to it then make it visible. If you have a compelling reason for moving the focus, then move it to the H1 heading.