Version #3b — Accessible ARIA Tabs

identical to Version #2b, except that,
the tabpanel itself has tabindex="0" to place it in the TAB order
after loading a new tab, the user can press the TAB key again to move focus the tabpanel

First Tab
Second Tab
Third Tab

First Tab's Main Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur blandit tellus nec turpis. In at sem. Nunc tempus sem. Morbi tincidunt diam vitae purus. Nulla facilisi. Curabitur facilisis ligula ut dui. Vivamus placerat, libero ut convallis elementum, urna nisi nonummy libero, eu porttitor ante neque eu nulla.

Quisque ac velit. Phasellus ac eros in sapien congue elementum. Donec vitae massa vitae magna rutrum placerat. Vestibulum tortor. Cras vitae justo at nisi commodo euismod.

Second Tab's Main Heading

Aliquam vehicula justo ut metus. Maecenas sollicitudin, leo vel eleifend consectetuer, ligula magna hendrerit massa, a facilisis eros tellus non arcu. Quisque pulvinar, metus sed ullamcorper lacinia, nulla nibh consequat libero, ac nonummy quam diam ut neque. Suspendisse interdum lacinia nulla.

Quisque dapibus feugiat magna. Nunc velit erat, congue eget, tristique et, scelerisque id, quam. Phasellus nonummy enim in pede. Phasellus metus nibh, ultrices convallis, auctor aliquet, suscipit eu, nisi.

Third Tab's Main Heading

Sed ut lectus in tellus blandit dapibus. Mauris elit quam, fringilla vel, luctus eu, molestie sit amet, diam. Quisque dapibus feugiat magna. Nunc velit erat, congue eget, tristique et, scelerisque id, quam. Phasellus nonummy enim in pede. Phasellus metus nibh, ultrices convallis, auctor aliquet, suscipit eu, nisi.

Version 3b Results

Results are the same as the results for Version #2b for all screen readers, except in the following ways:

JAWS 9

after selecting a tab control, pressing the TAB key will move focus to the heading in the tabpanel
in IE8, JAWS 9 starts reading the tabpanel content after the heading receives focus
in FF3.6, after exiting Forms Mode or turning the Virtual PC Cursor back on, setting focus to the tabpanel makes JAWS 9 read its content

JAWS 10

in both browsers, however a new tab is selected, JAWS 10 starts reading the tabpanel content when it receives focus using the TAB key

JAWS 11

since, in IE8, JAWS 11 automatically exits Forms Mode after selecting a new tab control, using the TAB key to move focus to the tabpanel as a trigger to force JAWS back into Browse Mode isn’t required; nonetheless, after setting focus to the tabpanel, JAWS 11 reads the tabpanel’s heading and stops. Update (Sept. 29, 2010): In later versions such as JAWS 11.0.1471, this no longer happens, that is, JAWS does not automatically exit Forms Mode upon moving focus to an adjacent tab control.
in FF3.6, JAWS 11 remains in Forms Mode after selecting a new tab control, but then moving focus to the tabpanel forces JAWS back into Browse Mode and it reads the tabpanel’s heading and stops
however, in both browsers, if having turned off the Virtual PC Cursor to navigate the tabs, after turning it back on and moving focus to the tabpanel by using the TAB key, JAWS 11 oddly automatically enters Forms Mode again and stops

Window-Eyes 7.11 and 7.2

in neither browser does Window-Eyes even register the tabpanel as being a focussable element in the TAB order unless Browse Mode has been turned off; but then Browse Mode needs to be turned back on to be able to read the tabpanel content
in IE8 in Windows XP, if focus is set to the tabpanel when Browse Mode is turned back on, Window-Eyes starts reading from the top of the page, while in Windows 7, it reads the tab controls and then the tabpanel content

NVDA 2010.1

in both IE8 and FF3.6, setting focus to the tabpanel forces NVDA back into Browse Mode, and it starts reading the tabpanel content

SAToGo 3.1.24

in IE8, SAToGo does not register the tabpanel’s heading as a focussable element in the TAB order, but this is not a problem as upon selecting a tab, focus is automatically moved into the tabpanel which SAToGo starts reading on its own
in FF3.6, things aren’t as good: upon selecting a new tab control, SAToGo seems to set focus to the tabpanel itself and then stop; after that, the “say all” command starts SAToGo reading the text that follows the entire tabbed interface, thus skipping the desired tabpanel’s content

VoiceOver 3

since VoiceOver works quite well with Version #2b already, and does not need any mechanism to force it in or out of any type of Application Mode, setting tabindex="0" on the tabpanel itself only serves to add another focussable element to the TAB order
after selecting a new tab control, moving focus to the tabpanel with the TAB key causes VoiceOver to start reading all of the tabpanel’s content; however, if focus is on a link within the tabpanel and you press Shift+TAB to move focus back to the tabpanel itself, VoiceOver does not start reading it

August 29, 2010