• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



Page history last edited by Scott González 11 years, 7 months ago


type: widget

release: 1.5

status: released

documentation: http://api.jqueryui.com/tabs/

demo: http://jqueryui.com/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:



  • 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.



  • When focus is on a tab:
    • UP/LEFT - Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
    • DOWN/RIGHT - Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
    • HOME - Move focus to the first tab. Activate focused tab after a short delay.
    • END - Move focus to the last tab. Activate focused tab after a short delay.
    • SPACE - Activate panel associated with focused tab.
    • ENTER - Activate or toggle panel associated with focused tab.
    • ALT+PAGE UP - Move focus to the previous tab and immediately activate.
    • ALT+PAGE DOWN - Move focus to the next tab and immediately activate.
  • When focus is in a panel:
    • CTRL+UP - Move focus to associated tab.
    • ALT+PAGE UP - Move focus to the previous tab and immediately activate.
    • ALT+PAGE DOWN - Move focus to the next tab and immediately activate. 



  • Follows ARIA best practices with the following exceptions:
    • Arrow keys do not immediately activate panels. This allows users to quickly navigate tabs without activating them which may be important for remote tabs.
      • aria-selected is updated immediately so that AT announces the tab as selected, even though there is a delay in actually activating.
    • Implemented ALT+PAGE UP/DOWN instead of CTRL+PAGE UP/DOWN because of interference with browser shortcuts, as mentioned in the best practices.
      • Also works when a tab is focused. This allows consistent navigation regardless of whether focus is on a tab or in a panel.
  • Tabs and panels have aria-labelledby pointing to the main anchor in the tab. This allows additional controls, such as remove buttons, to be added to the tab without affecting the label. The main tab has a role of presentation.
  • Ajax tabs have aria-live=polite on the content panel. When the tab is activated and the content is loading aria-busy is set to true; after the content loads aria-busy is removed.
  • Added aria-controls on the tabs pointing at the associated panels. This allows AT to announce the relationship. For example, JAWS implements a feature where you can jump from the tab to the panel because of the aria-controls relationship.
    • Because we use delayed activation, this is not actually announced as the user navigates with the arrow keys since the panel is hidden when the tab gains focus.
  • Notes
    • Orca starts in caret navigation mode by default, which breaks arrow navigation. The user must press Orca + F12 to switch to Gecko's navigation mode in order to get proper arrow navigation.  



4 - Markup & Style:


(only used prior to implementation)



5 - Latest version of plugin:




6 - Open issues being discussed




Comments (0)

You don't have permission to comment on this page.