Version #1 — Accessible ARIA Tabs
- the
tabcontrols are simple list items and not links
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 1 Results
JAWS 9
- use the TAB key to reach the currently selected
tab - to use the arrow keys to navigate the
tabcontrols, you must turn off the Virtual PC Cursor (by pressing Ins+Z); pressing the Enter key will not activate Forms Mode in either browser - in IE8 only, after turning the Virtual PC Cursor back on and with focus still set to a
tabcontrol, 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 selectedtabcontrol and into thetabpanel - JAWS 9 does not identify the
tabs as controls in either IE8 or FF3.6 when it comes across them as part of reading through the page, but it does identify eachtabcontrol as a “tab” when navigating among them with the arrow keys while the Virtual PC Cursor is off
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
tabcontrol - in order to use the arrow keys to navigate the
tabcontrols, 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
tabpanelcontent - JAWS 10 identifies the selected
tabcontrol in IE8, but not in FF3.6
JAWS 11
- JAWS 11 automatically enters Forms Mode when focus is set to the currently selected
tabcontrol, and you can then use the arrow keys to navigate thetabs - you must manually exit Forms Mode to read
tabpanelcontent - JAWS identifies the selected
tabcontrol 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
tabcontrols, but after turning the Virtual PC Cursor back on, JAWS identifies the previoustabas the selected control and will read the previously selected and now hiddentabpanelcontent, 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
tabcontrol as a “page tab”, but they are not included in the TAB order - in IE8, Window-Eyes registers the
tabpanels as frames, using the relevanttabcontrol as the frame title, and while pressing M or Shift+M will make Window-Eyes read the next or previoustabcontrol’s name, it does not move focus to the control or thetabpanel - you must manually turn off Browse Mode to even find the
tabcontrols using the TAB key, but then you can use the arrow keys - the
tabcontrol names are not announced when receiving focus in IE8, but they are in FF3.6, including the total number oftabs, e.g., "Second Tab, two of three" - in order to read the
tabpanelcontent after having selected a newtab, you must manually turn Browse Mode back on, but upon doing so, Window-Eyes starts reading from the top of the page
NVDA 2010.1
- automatically enters Focus Mode when focus is set to a
tabcontrol, and you can then use the arrow keys to switchtabs - upon selecting an adjacent
tab, NVDA announces its name, identifies it as selected, and in FF3.6, also lists the total number oftabs, e.g., "Second Tab, tab selected, two of three" - in both browsers, and while in Focus Mode, you can also use NVDA's object navigation to find your way to the
tabpanelfrom the selectedtabcontrol, and then review thetabpanelobject's text with numpadPlus - in IE8, with focus set to a
tabcontrol, pressing numpadPlus, which is the command to read the current navigator object, causes NVDA to continue reading from the selectedtab, including thetabpanelcontent; in FF3.6, NVDA only reads thetabcontrol's text, which makes more sense since it is the current object - otherwise, you can just manually exit Focus Mode to read the
tabpanelcontent and continue interacting with the page in Browse Mode
SAToGo 3.1.24
- you can navigate to and among the
tabcontrols by pressing the TAB key; you cannot use the arrow keys - in IE8, but not in FF3.6, pressing the Enter or Space keys selects a
tab - when setting focus to a
tabcontrol, it is identified as a tab; the currently selectedtabcontrol is also identified as selected - upon selecting a
tab, SAToGo moves focus into thetabpaneland starts reading its content
VoiceOver 3
- can press TAB to reach the currently selected
tabcontrol - using the VoiceOver navigation commands, i.e., Ctrl+Option+right arrow or Ctrl+Option+left arrow, focus will always be set to the first
tabcontrol, whether or not it is the currently selectedtab, and setting focus to it this way does not activate it - after using the VoiceOver navigation commands to reach the first
tabcontrol, pressing Ctrl+Option+Space to perform the default action for the item does not load the associatedtabpanel - with focus on a
tabcontrol, you can always use the arrow keys to navigate among them, which also serves to load the relevanttabpanel - no matter how focus is set to a
tabcontrol, 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
tabpanelcontent using the standard VoiceOver commands