Version #3a — Accessible ARIA Tabs

identical to Version #2b, except that,
the first heading in each tabpanel 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 to the tabpanel’s first heading

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 3a Results

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

JAWS 9

in IE8, JAWS 9 starts reading from the top of the page after pressing the TAB key to move focus to the heading in the tabpanel
in FF3.6, if having turned off the Virtual PC Cursor to navigate the tabs, after turning it back on and moving focus to the tabpanel’s heading, JAWS 9 will read the heading, then start reading from the current tab control and into the tabpanel content
if having used Forms Mode in FF3.6 to navigate the tabs, after exiting Forms Mode and setting focus to the tabpanel’s heading, JAWS 9 will read the heading and stop

JAWS 10

in both browsers, however a new tab is selected, JAWS 10 reads the tabpanel’s heading and stops 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 heading in the tabpanel as a trigger to force JAWS back into Browse Mode isn’t required; nonetheless, after setting focus to the heading, JAWS 11 reads the 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’s heading forces JAWS back into Browse Mode and it reads the 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 heading by using the TAB key, JAWS 11 oddly automatically enters Forms Mode again

Window-Eyes 7.11 and 7.2

with Window-Eyes 7.11 only, the tabpanel’s heading acts as an additional TAB stop when moving from the controls to the tabpanel content while using the TAB key, though in IE8, Window-Eyes calls it an “edit box”;Window-Eyes 7.2 does not find the heading in the TAB order at all, unless Browse Mode is off
in IE8, since all of the tab controls are found in the TAB order, there is no need to turn off Browse Mode to navigate them
however, while in IE8 selecting a tab control using the Enter key loads the relevant tabpanel, unfortunately, in Windows XP, Window-Eyes’ virtual buffer does not seem to get updated, and so when prompted to read the newly loaded tabpanel’s content, it will read the content from the tabpanel that was previously loaded and is now hidden; on the other hand, in Windows 7, upon activating the tab using the Enter key, Window-Eyes reads through the tab controls and then the newly loaded tabpanel content
in FF3.6, the only way to access the tab controls or the tabpanel’s heading is to turn off Browse Mode; setting focus to the tabpanel’s heading does not turn Browse Mode back on, nor does Window-Eyes even read the heading when it is given focus using the TAB key

NVDA 2010.1

in IE8, setting focus to the tabpanel’s heading using the TAB key does not force it out of Application Mode, so you still need to manually enter Browse Mode again to read the tabpanel content
in FF3.6, things work like a charm: using the TAB key to set focus to the heading forces NVDA back into Browse Mode, at which point it reads the heading and you can easily read the rest of the tabpanel content using the normal reading commands

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, the heading is focussable using the TAB key, but SAToGo does not read the heading text upon its gaining focus
in FF3.6, upon selecting a new tab, SAToGo, although somewhat inconsistently, starts reading the tabpanel content; the heading is announced only as "heading" and its text is otherwise not read

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’s heading only serves to add another focussable element to the TAB order
however, VoiceOver does properly read the heading text when it gains focus via the TAB key

August 29, 2010