Tab Panel
From DHTMLStyleGuide
Contents |
Status
current status of the document.
In Review
Description
A tabbed interface component 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.
There is a default tab which is active when the tabbed interface component is initialized.
Visual Characteristics
- The active tab has a different style 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.
Key Behaviors
- 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
- NEW 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.
- NEW 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 implement 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. I (Becky) see 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 Behaviors
- clicking on the tab title activates the tab and sets focus to the tab title.
Keyboard/Mouse Interaction
Open Issues
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? There 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.
How to select the tab is controversial. Some feel that setting focus to a tab should select that tab and load the contents of that tab panel. Since the tab panel contents may be loaded externally and require a server round trip, some people feel that the user should be required to press enter to activate the tab. This behavior would allow the user to "preview" the tab title before electing to load the contents of that tab panel. DECISION: At the November, 2006 meeting the group resolved this issues and decide that the tab would be activated/loaded when the tab title receives focus.
