Version #1 — Accessible ARIA Tabs
- the
tab
controls 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
tab
controls, 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
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 selectedtab
control and into thetabpanel
- JAWS 9 does not identify the
tab
s as controls in either IE8 or FF3.6 when it comes across them as part of reading through the page, but it does identify eachtab
control 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
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
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 thetab
s - you must manually exit Forms Mode to read
tabpanel
content - JAWS 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 previoustab
as the selected control and will read the previously selected and now hiddentabpanel
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 - in IE8, Window-Eyes registers the
tabpanel
s as frames, using the relevanttab
control as the frame title, and while pressing M or Shift+M will make Window-Eyes read the next or previoustab
control’s name, it does not move focus to the control or thetabpanel
- you must manually turn off Browse Mode to even find the
tab
controls using the TAB key, but then you can use the arrow keys - the
tab
control names are not announced when receiving focus in IE8, but they are in FF3.6, including the total number oftab
s, e.g., "Second Tab, two of three" - in order to read the
tabpanel
content 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
tab
control, and you can then use the arrow keys to switchtab
s - upon selecting an adjacent
tab
, NVDA announces its name, identifies it as selected, and in FF3.6, also lists the total number oftab
s, 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
tabpanel
from the selectedtab
control, and then review thetabpanel
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 selectedtab
, including thetabpanel
content; in FF3.6, NVDA only reads thetab
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; 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
tab
control, it is identified as a tab; the currently selectedtab
control is also identified as selected - upon selecting a
tab
, SAToGo moves focus into thetabpanel
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 selectedtab
, 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 not load the associatedtabpanel
- with focus on a
tab
control, 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
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