Version #2a — Accessible ARIA Tabs

the tab controls are links within the tablist’s list items
the href attribute is removed from each tab link to prevent JAWS 9 and 10, and JAWS 11 in a certain context, and NVDA in IE8 from reading the absolute URL with fragment identifier when the link gains focus; this has the side effect of preventing Window-Eyes from finding the current tab control when using the TAB key
the tablist’s list items are set with role="presentation"
the tab links' default click event is programmatically prevented

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

JAWS 9

use the TAB key to reach the currently selected tab
to use the arrow keys to navigate the tab controls, in IE8 you must turn off the Virtual PC Cursor (by pressing Ins+Z); in FF3.6, you can also press the Enter key to activate Forms Mode
in IE8, after turning the Virtual PC Cursor back on and with focus still set to a tab control, using the “say all” command causes JAWS 9 to start reading from the top of the page; in FF3.6, JAWS continues reading from the selected tab control and into the tabpanel
in FF3.6, but not in IE8, JAWS 9 identifies the tabs as controls when it comes across them as part of reading through the page
in both browsers, it identifies each tab control as a “tab” when navigating among them with the arrow keys with the Virtual PC Cursor off
in FF3.6, but not in IE8, JAWS 9 also identifies the selected tab control

JAWS 10

use the TAB key to reach the currently selected tab
even though JAWS 10 has “Auto Forms Mode,” it does not automatically enter Forms Mode when focus is set to a tab control
in order to use the arrow keys to navigate the tab controls, you must either turn off the Virtual PC Cursor (by pressing Ins+Z) or enter Forms Mode (by pressing the Enter key)
Forms Mode must be off and the Virtual PC Cursor on for JAWS 10 to read the new tabpanel content
JAWS 10 identifies the selected tab control in IE8, but not in FF3.6, which is the reverse of how JAWS 9 behaves

JAWS 11

JAWS 11 automatically enters Forms Mode when focus is set to the currently selected tab control, and you can then use the arrow keys to navigate to an adjacent tab
in IE8, but not in FF3.6, upon setting focus to an adjacent tab control, JAWS 11 automatically exits Forms Mode, so you can easily navigate to only one tab in either direction using the arrow keys; you need to manually enter Forms Mode again by pressing Enter and can then use the arrow keys to navigate to the next tab; this does, however, make easy to immediately begin reading the selected tabpanel’s content using normal reading commands. 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 order to read the tabpanel content, JAWS 11 must not be in Forms Mode
JAWS 11 identifies the selected tab control in both IE8 and FF3.6
Note: you can also manually toggle the Virtual PC Cursor off (by pressing Ins+Z) and then navigate by arrow key through all of the tab controls, but after turning the Virtual PC Cursor back on, JAWS identifies the previous tab as the selected control and will read the previously selected and now hidden tabpanel content, so it appears that the virtual buffer is not immediately updated this way

Window-Eyes 7.11 and 7.2

in reading through the page, Window-Eyes identifies each tab control as a “page tab”, but they are not included in the TAB order, since the tab links’ href attributes are removed
in IE8, Window-Eyes registers the tabpanels as frames, using the relevant tab control as the frame title, and while pressing M or Shift+M will make Window-Eyes read the next or previous tab control’s name, it does not move focus to the control or the tabpanel
you must manually turn off Browse Mode to find the tab control links using the TAB key, but then you can use the arrow keys
if Browse Mode is off, the tab control names are not announced when receiving focus in IE8, but they are in FF3.6, including the total number of tabs, e.g., “Second Tab, two of three”
in order to read the tabpanel content after having selected a new tab, you must manually turn Browse Mode back on, and upon doing so, in IE8 Window-Eyes reads through the tab controls and then the tabpanel content, while in FF3.6 it starts reading from the top of the page

NVDA 2010.1

automatically enters Focus Mode when focus is set to a tab control, and you can then use the arrow keys to switch tabs
upon selecting an adjacent tab, NVDA announces its name, identifies it as selected, and in FF3.6, also lists the total number of tabs, e.g., “Second Tab, tab selected, two of three”
in both browsers, and while in Focus Mode, you can use NVDA’s object navigation to find your way to the tabpanel from the selected tab control, and then review the tabpanel object's text with numpadPlus
in IE8, with focus set to a tab control, pressing numpadPlus, which is the command to read the current navigator object, causes NVDA to continue reading from the selected tab, including the tabpanel content; in FF3.6, NVDA only reads the tab control's text, which makes more sense since it is the current object
otherwise, you can just manually exit Focus Mode to read the tabpanel content and continue interacting with the page in Browse Mode

SAToGo 3.1.24

you can navigate to and among the tab controls by pressing the TAB key and in both IE8 and FF3.6, hitting Enter or the Space keys will select a tab; you cannot use the arrow keys
when setting focus to a tab control, it is identified as a tab; the currently selected tab control is also identified as selected
upon selecting a tab, SAToGo moves focus into the tabpanel and starts reading its content

VoiceOver 3

can press TAB to reach the currently selected tab control
using the VoiceOver navigation commands, i.e., Ctrl+Option+right arrow or Ctrl+Option+left arrow, focus will always be set to the first tab control, whether or not it is the currently selected tab, and setting focus to it this way does not activate it
after using the VoiceOver navigation commands to reach the first tab control, pressing Ctrl+Option+Space to perform the default action for the item does load the associated tabpanel
with focus on a tab control, you can always use the arrow keys to navigate among them, which also serves to load the relevant tabpanel
no matter how focus is set to a tab control, VoiceOver announces it and identifies if it is selected, e.g., "First Tab, tab one of three", "Second Tab, selected tab, two of three"
can easily continue reading the tabpanel content using the standard VoiceOver commands

August 29, 2010