Version #2b — Accessible ARIA Tabs

• the tab controls are links within the tablist’s list items
• the href attribute is not removed from each tab link, which allows Window-Eyes, in IE8 at least, to find the current tab control when using the TAB key; but now in IE8, JAWS 9 and 10, NVDA, and JAWS 11 when the Virtual PC Cursor is off, will read the absolute URL with fragment identifier when the link gains focus
• the tablist’s list items are set with role="presentation"
• the tab links' default click event is programmatically prevented

Version 2b 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
• when switching tabs in IE8 only, JAWS 9 reads the page’s absolute URL with the tab control’s fragment identifier
• in either browser, after exiting Forms Mode or turning the Virtual PC Cursor back on, the “say all” command causes JAWS 9 to continue reading from the selected tab control and into the tabpanel
• in FF3.6, but not in IE8, JAWS 9 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)
• when switching tabs in IE8 only, JAWS 10 reads the page’s absolute URL with the tab control’s fragment identifier
• 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 in this case, when switching tabs in IE8, JAWS 11 also reads the page’s absolute URL with the tab control’s fragment identifier. Additionally, in both browsers, 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”, though this is not the case when using the TAB key to access the them
• 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
• since the tab links' href attributes are not removed, in IE8 Window-Eyes finds them via the TAB key; in fact, each of the tab control links are in the TAB order in IE8, even those with tabindex="-1"
• in IE8, after using the TAB key to reach a new tab control, pressing Enter activates the control and loads the relevant tabpanel
• however, and interestingly, in Windows 7, after pressing Enter to load a new tabpanel, Window-Eyes reads through the tab controls and then the tabpanel content; but in Windows XP, Window-Eyes does not do this, and upon prompting it to read the tabpanel content, it reads the previously loaded and now hidden tabpanel, suggesting that the virtual buffer was not updated
• to use the arrow keys, you must still manually turn off Browse Mode
• unfortunately, in FF3.6, the tab controls are not included in the TAB order, which means the only way to set focus to them is by first turning off Browse Mode
• if Browse Mode is off, the tab control names are announced in FF3.6 when receiving focus, including the total number of tabs, e.g., “Second Tab, two of three”; this doesn’t happen at all in IE8
• after turning Browse Mode back on, in FF3.6 Window-Eyes starts reading from the top of the page; while in IE8, it reads through the tab controls and then the newly loaded tabpanel content

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”
• unfortunately, when selecting a tab control in IE8, NVDA also reads its absolute URL with fragment identifier since the link’s href attribute has not been removed
• 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 loads 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