type: widget

release: 1.5

status: complete

documentation: http://docs.jquery.com/UI/Tabs

demo: http://jqueryui.com/demos/tabs

 

 

---

 

1 - Description:

 

A tab strip is used to chunk sections of content into multiple panes that can be shown one at a time, much like the sections in a notebook. Depending on the size of the window and length of tab labels, you can generally create a tab view that contains between two and eight tabs. This rule of thumb is followed because tab strips should never wrap to multiple rows or insert horizontal scrollers for the tabs because of the poor visual connection between the tab and the pane below (yes, these have been seen in the past, but it's not a good thing). If there are too many items to fit in a tab strip, consider re-grouping the tab content into fewer tabs or moving to a different navigation widget like a vertical left navigation bar or tree which can accomodate a larger number of items.

 

Detailed tab behavior descriptions can be found for Apple OS X and Microsoft Windows.

 

---

 

2 - Visual Design:

 

 

---

 

3 - Functional Specifications/Requirements:

 

Specificiations

• Indices are zero-based. 
• There are 3 possibilities to set the initially selected tab:
• active option (highest priority)
• url fragment identifier matching a tab href's fragment identifier: href="#fragment-identifier" 
• the ui-tabs-active class attribute is already specified in HTML source: <li class="ui-tabs-active"> (lowest priority)

• It is possible to initialize an empty tab set and add tabs later on. 

• The active tab cannot be collapsed by activating it a second time unless the collapsible option is set to true. 

• The type of tab (in-page vs. ajax) is determined automatically from the href attribute of the contained anchor elements.

 

Options

• active (mixed, default: null)
• the zero-based index of the tab that is active (open)
• negative value selects tabs going backward from the last tab
• when collapsible: true, active: false closes all tabs
• when null on initialization, the active tab will be set as follows:
• a tab with an href that matches the fragment identifier from the URL
• a tab with the ui-tabs-active class
• if collapsible, set to false
• set to 0 (first tab) 
• collapsible (boolean, default: false)
• there can be only one tab panel open at once; for collapsible:true, all panels can be closed, otherwise exactly one must be open
• event (string, default: "click")
• the name of the event that is used for activating a tab. To activate on hover, use "mouseover"
• disabled (boolean or array, default: false)
• boolean: fully enable or disable the tabs  
• array: array of zero-based tab indices that are disabled
• fx (object or array of 2 objects, default: (no effects used))
• The options in this object/these objects are passed through to the jQuery.animate method.
• If objects are given in array, the first object defines the hide, the second one the show animation being used.

 

Methods

• load( index )
• loads the panel content of a remote tab (specified by index)
• index may also be the href value of the tab 
• enable()
• enables all tabs
• enable( index ) 
• enables the tab at the specified index
• index may also be the href value of the tab 
• disable()
• disables all tabs
• disable( index )
• disables the tab at the specified index 
• index may also be the href value of the tab 
• destroy()
• destroys the tabs, reverting all changes applied by the tabs widget

 

Events

• beforeActivate (event: [depends on event option])
• triggered directly after a tab is activated
• can be cancelled to prevent the tab from activating  
• ui object:
• newTab (object[jQuery])
• oldTab (object[jQuery])
• newPanel (object[jQuery])
• newPanel (object[jQuery]) 
• activate (event: [depends on event option])
• triggered after the tab has been activated and the associated panels have been shown/hidden
• ui object:
• newTab (object[jQuery])
• oldTab (object[jQuery])
• newPanel (object[jQuery])
• newPanel (object[jQuery]) 
• beforeLoad (event: [depends on event option])
• triggered after beforeActivate for a remote tab
• can be cancelled to prevent the tab panel from loading content 
• ui object:
• tab (object[jQuery])
• panel (object[jQuery])
• jqXHR
• ajaxSettings
• load (event: [depends on event option])
• triggered after a remote tab has been loaded
• ui object:
• tab (object[jQuery])
• panel (object[jQuery]) 

 

 

---

 

4 - Markup & Style:

 

4.4 Accessibility recommendations 

 

Required ARIA Markup:

• role="tablist" for the outer container element
• role="tab" for each tab element
• role="tabpanel" on each tab panel element
• aria-selected="true/false" for each tab, depending on whether the tab is currently the active one in the tablist
• aria-expanded="true/false" for each tab panel, depending on whether the corresponding tab is currently expanded. This is specifically important for tabs that allow each tab to be collapsed.
• aria-controls="<ID>" on each tab, references the ID of the tab's corresponding panel element
• aria-labelledby="<ID>" on each tab panel, references the ID of the panel's corresponding tab element (in other words, the tab provides the accessible name for the panel)
• aria-live="polite" on tab panels that load remote content
• aria-busy="true/false" on tab panels with remote contents. The value will be "true" while the panel contents are loading, indicating to assistive technology that the content is not available yet. 

 

Keyboard Accessibility:

 

To comply with the DHTML Styleguide, the following keystrokes need to be supported, exceptions noted:

• For tab elements:
• Left / Up arrow: Select and focus previous tab (if first tab has been reached, wrap to the last)
• Right / Down Arrow: Select and focus next tab (if last tab has been reached, wrap to the first)
• Ctrl + arrow keys: Change focus to the next / previous tab without selecting it. This is useful to allow (screen reader) users to explore the available tabs without triggering remote content (as this could have a high performance in bandwidth and delay). The Space /Enter key can then be used on the focused, unselected tab to select and expand it. 
• Home: Select and focus first tab
• End: Select and focus last tab
• Enter / Space: Toggle the tab's expanded state (for tabs that allow each tab to be collapsed)
• alt + del: Delete the currently selected tab (for tabs that allow this) (needs to be in an addon)
• Inside Tab Panel:
• Alt + Del: Delete the currently selected tab (for tabs that allow this) (needs to be in an addon)
• Ctrl Alt + PageUp: Select, expand and focus the tab associated with the previous tab panel (or wrap to the last); use Alt to avoid native keybindings
• Ctrl Alt + PageDown: Select, expand and focus the tab associated with the next tab panel (or wrap to the first); use Alt to avoid native keybindings
• Ctrl + Up Arrow: Focus tab coresponding to the currently opened panel (ignored, too much conflict and not useful enough)

 

A choice needs to be made between two types of keyboard interaction:

1. Each tab is part of the web page's tab order, the Enter key is used to activate a tab (the way the JQuery tabs worked originally)
2. Only the selected tab is part of the tab order, the arrow keys are used to change the selected tab (as recommended in the key strokes section above)

There has already been some discussion about the ideal keyboard model for tabs, which describes the benefits and disadvantages of both options. Ideally this discussion should be reopened to reach concensus. 

 

Potential issues:

1. When a tab receives focus this needs to be indicated visually
2. The selected tab needs to be indicated in a way that does not depend on color alone and remains visible in high contrast mode

 

Felix Nagel has created a plugin (ui.ariaTabs) that applies many of the recommendations above, and this should be used as a start for implementing accessibility changes to jquery.ui.tabs.

 

Implementation of the above mentioned plug-in in jQuery UI Tabs (tagged version 1.8.11) has been done, see here: https://github.com/fnagel/jquery-ui/commits/tabs-accessibility

 

Following issues needs to be fixed / discussed:

 

• Blurs temporally disabled cause of massive usability issues.
• I think it's probably safe to remove all of the blurs that you commented out. I have a feeling that was originally done purely for the visual effect. (Scott) 
• Implement aria-disabled for disable option/method 
• Since the tab role is set on the li, would it make sense to place all the ARIA attributes on the li instead of the a?
• Check above keyboard control recommendation list and do a compare with the WCAG and ARIA lists
• Down arrow key could cause problems in NVDA

 

 

---

 

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/tabs/default.html

 

---

 

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

 

• Support same markup as Accordion: http://forum.jquery.com/topic/new-markup-structure-for-tabs

 

---