tabindex, Keyboard Focus and Some ARIA in Screen Readers

These test cases are in no way comprehensive or robust: They should really be supplemented with examples using a greater variety of HTML5 elements and ARIA roles, but I just can't be bothered at this point. Nonetheless, they reveal some interesting, if not slightly worrying, behaviour on the part of at least two screen readers.

At least two things are being tested here: one, how browsers and some screen readers manage keyboard focus when using the TAB key to navigate through links and elements with tabindex="0" and tabindex="-1"; and two, what effect, if any, some ARIA roles might have on the ability of some screen readers to find and set focus to those links and elements.

JAWS 9, 10, and 11, NVDA 2010.1, Window-Eyes 7.11, and SAToGo 3.0.202 were tested in Internet Explorer 8 and Firefox 3.6. VoiceOver 3 was tested in Safari 4.03

The Tests

The same list of links and elements is repeated in five different scenarios, A through E. In each scenario, the expected behaviour is as follows:

  • links with an href attribute are in the TAB order and gain visual focus
  • links with an href attribute show up in the screen reader's links list
  • elements with tabindex="0" are in the TAB order and gain visual focus
  • elements with tabindex="-1" are not in the TAB order and do not gain visual focus

As such, items 1, 2, 3, and 4 in the lists below, as well as the heading with tabindex="0" near the bottom of the page, should be the only elements in the TAB order. And items 1, 2, and 5, which are the link elements with href attributes, should be the only links that appear in the screen reader's list of links.

A. Simple div and no ARIA Roles

The following list is wrapped in a simple div. No ARIA roles are used anywhere. Pretty straightforward HTML.

B. List with role="navigation"

The following list has role="navigation".

C. Simple div with role="article"

The following list has no ARIA role, but is wrapped in a div with role="article"

D. Simple HTML5 section element

The following list is wrapped in a simple section element with no ARIA role.

E. HTML5 section with role="main"

The following list is wrapped in a simple section element with ARIA role="main".

Heading with an id and tabindex="0"

Heading with an id and tabindex="-1"

One last plain old link

Results

On their own, using just a keyboard, IE8 and FF3.6 behave as expected, providing TAB stops only at items 1, 2, 3, and 4, and the heading with tabindex="0".

Where the screen readers are concerned, JAWS, versions 9 through 10, NVDA in Firefox, and VoiceOver do very well and behave as one would expect. With Window-Eyes and SAToGo, however, the behaviour is quite problematic and suggests, at the least, that currently using some ARIA roles (e.g., article and navigation) could very possibly make a web page or web application inaccessible to users of those two screen readers.

JAWS

JAWS 9, 10, and 11 behave properly in both IE8 and FF3.6, with TAB stops at items 1, 2, 3, 4, and the appropriate heading; and JAWS's links list includes only links 1, 2, and 5.

NVDA

NVDA 2010.1 performs correctly in FF3.6, but in IE8, the links list also contains items 3, 6 and 7, which are links with no href attributes, and so not really links at all. Additionally, in IE8, NVDA automatically enters Focus Mode whenever a non-link element with tabindex="0" gets focus. Finally, in IE8, NVDA considers the two headings with a tabindex attribute to be form controls (i.e., they can be reached by pressing F or Shift+F).

SAToGo 3.0.202

Things start to get wonky with SAToGo. In IE8, the TAB key will set focus to any a element with either an href or tabindex attribute (i.e., items 1, 2, 3, 5, and 7), and includes an extra TAB stop, but without visual focus, on item 6, the a element with nothing but an id. The two headings just don't appear in IE8's TAB order. And like NVDA in IE8, SAToGo's links list in IE8 contains every link in every section, i.e., items 1, 2, 3, 5, 6, and 7, regardless of the presence of an href attribute.

In FF3.6, we see a change in behaviour, and for the better, caused by role="article" in section C. In all the other sections, SAToGo in FF3.6 sets focus to items 1, 2, 3, 4, 5, 7, and 8, while item 6 does not appear in the TAB order as it does in IE8. But in section C, where the list of items is wrapped in a div with role="article", SAToGo in FF3.6 properly puts only items 1, 2, 3, and 4 in the TAB order.

Also, in FF3.6, both of the headings with tabindex attributes get visual focus via the TAB key. And the links list includes links 1, 2, 3, 5, and 7, that is, every link except that one that is nothing but an a element with an id attribute.

Window-Eyes 7.11

Window-Eyes doesn't seem to have a problem with role="article", but the unordered list with role="navigation" in section B it just can't handle. (See also HTML5, ARIA Roles, and Screen Readers in May 2010.) With sections A, C, D, and E, only items 1, 2, and 5 get visual focus using the TAB key in both IE8 and FF3.6. In IE8, but not in FF3.6, items 4 and 8, as well as the two headings with tabindex, are also considered editable controls, and are found in the TAB order, but don't receive visual focus.

Where section B with role="navigation" on the unordered list is concerned, item 1 is a TAB stop in both browsers, but only in FF3.6 does it also get visual focus.

The links list in Window-Eyes, however, is pretty good, as it only includes items 1, 2, and 5, that is, the links with href attributes, but only for sections A, C, D, and E. Again, the role="navigation" in section B prevents Window-Eyes from finding any links in the list, though in FF3.6, Window-Eyes does find the first link, item 1, in section B, and includes it in the links list.

Update (May 15, 2010): Additional testing indicates that Window-Eyes doesn't exhibit the same problems with role="navigation" if it is set on a div wrapping the unordered list instead of being added to the list itself. In this case, items 1, 2, and 5 receive visual focus via the TAB key.

VoiceOver 3

Using the TAB key will set focus to items 1, 2, 4, and the heading with tabindex="0", but not item 3, which is a link with tabindex="0" but no href attribute. VoiceOver's links list, however, is correct, listing only items 1, 2, and 5 for every section.

Tagged , , , , , , , , .