TabPanel

In ARIA terms, a tabbed interface component is a container for resources associated with a tab. It is a set of layered pages where only one page is displayed at a time. The general look is similar to a file folder with a "tab" that contains the title of the folder. The tabs are arranged along one of the edges of the contents but most commonly are found at the top of the page. The user navigates and makes the contents of each page visible by interacting with the title "tab" of the page. Sometimes referred to as a tab container or tab panel.

Terminology

tabbed interface component - a set of tabs and associated tab panels

tab panel - contents area that is associated with a tab

tab - the label/title area of the tab panel. This is where you click to activate a tab panel

tablist - the set of tabs

General Behavior

When the user activates a tab, the contents of that tab is made visible. The tab is considered "active". The tab remains active until another tab is activated.

The active tab is placed into the tab order. Only the active tab should be in the tab order.

A default tab is specified that is active when the tabbed interface component is initialized.

A collection of tabs and their associated tab panels is a complex widget, because it performs show/hide actions as well as moving the user's point of regard around within the content.

See also the Tab Panel Discussion on XTECH

Keyboard Interaction

tab - only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.
left arrow - with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.
right arrow - with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.
up arrow - behaves the same as left arrow in order to support vertical tabs
down arrow - behaves the same as right arrow in order to support vertical tabs
ctrl-up arrow - with focus anywhere within the tab panel, pressing ctrl-up arrow will move focus to the tab for that panel. This is not standard behavior - is this something we want to implement? Is it necessary if we provide a mechanism to change the active tab? Similar to ctrl-pageup/pagedown in Firefox to switch tabs?
alt-del - When deletion is allowed, with focus anywhere within the tab panel, pressing alt-del will delete the current tab and tab panel from the tabbed interface control. If additional tabs remain in the tabbed interface, focus goes to the next tab in the tab list. An alternative to providing a keystroke to close a tab is to provide a context menu that is associated with the tab title. When focus is on the tab, pressing shift-F10 or pressing the right mouse button will open a context menu with the close choice
ctrl-pageup - When focus is inside of a tab panel, pressing ctrl-pageup moves focus to the tab of the previous tab in the tab list and activates that tab. When focus is in the first tab panel in the tab list, pressing ctrl-pageup will move focus to the last tab in the tab list and activate that tab.
ctrl-pagedown - When focus is inside of a tab panel, pressing ctrl-pagedown moves focus to the tab of the next tab in the tab list and activates that tab. When focus is in the last tab panel in the tab list, pressing ctrl-pageup will move focus to the first tab in the tab list and activate that tab.

Regarding ctrl-pageup/pagedown. This is currently implemented in Firefox to move between browser tabs. Firefox also supports ctrl-tab and ctrl-shift-tab to move between tabs. Internet Explorer 7 also uses ctrl-tab and ctrl-shift-tab. There may be advantages to using ctrl-pageup/pagedown as the keys to change tabs since it is a recognizable keystroke to at least Firefox users and is also supported by the Windows operating system to move between panels in a tabbed dialog. The problem is that if the user is within a tabbed interface control on a Web page, they can not easily switch browser tabs without first moving focus outside of the tabbed interface control. This may be acceptable. The other issue is if the entire Web page is a tabbed interface control - in that case the user could not ever switch browser tabs unless the control on the Web page ignored the ctlr-pageup/pagedown keypress (and thus letting the browser access it) when the first or last tab was reached.

Mouse Interaction

Clicking on the tab title activates the tab and sets focus to the tab title.

Styling

The active tab is visually differentiated from the other tabs. This style should be visible in high contrast mode.
Focus on the tab is usually indicated as focus on the title text/element of the tab. Setting focus to the tab activates that tab.

ARIA Roles and Properties

The tabbed interface component uses the ARIA role tab panel.
The tabbed panel contains tabs and their panels. An element with role tab is used as a grouping label, providing a link for selecting the tabcontent to be rendered to the user.
The currently selected tab has the state selected=true.
A tablist is the container role for a set of elements with the role attribute set to tab.

Unresolved

How to indicate that a tab panel can be deleted? Visually a close icon can be provided in the upper right hand corner of the tab which the user can click on to delete the tab panel. Putting this close icon in the navigation sequence would make extra navigation. Is there some way to indicate to a non-visual user that a tab panel can be deleted with a defined keystroke? Perhaps we can capture ctrl-w (the key used in Firefox and IE 7) to close a tab? T * here is still the issue of the user knowing that the tab is closable or not. Another option is to provide a context menu. With focus on the tab title the user would press shift-F10 to invoke a context menu - the context menu would have the close option. In both of these cases if the tab can not be closed, it still needs to capture the keystroke so that it doesn't get bubbled up and handled by the browser.

Retrieved from "http://www.weba11y.com/styleguide/index.php?title=Tab_Panel"