Felix Nagel edited this page Oct 9, 2013 · 18 revisions

As there is already a feature rich tabs widget by jQuery UI, my widget extends the original one. The widget supports all features of the original application. Powerful, accessible tabs — made easy!

Please Note

There are two versions of my tabs widget:

  1. “Addon” Version: last version was for jQuery 1.4.4 / UI 1.8.7, see here (This is version is not under active development)
  2. Standalone Version: current version is for jQuery 1.4.4 / UI 1.8.11, see here

There is another standalone implementation from Hans Hillen (see @hanshillen).


  • Tabs “addon” is not maintained anymore, please see https://github.com/fnagel/jquery-ui/tree/tabs-accessibility instead
  • Please see this issue for a new integrated version of the add-on (jQuery UI team plans to implement my features to the original widget).
  • I blogged about browser history support via jQuery Address (English language).
  • I blogged about jQuery UI Tabs made accessible (German language).



As the sortable tabs functionality is provided by the jQuery UI sortable Widget (which is not accessible and not really a part of the tabs widget), this functionality was not extended and no demo is provided.

PLEASE NOTE: Demos are no longer provided as this addon is outdated.

Real-Life examples

Contact me to add your project here.

Functionality features

  • supports all original features (like rotating or collapsible tabs and AJAX)
  • supports all original widget methods (like renaming, adding or deleting a tab)

File size of the minified version is less than 5 KB + original widget (about 11 KB).

Accessibility features

  • full browser history and title support via jQuerry Address
  • keyboard support (arrow keys, Home, End)
  • ARIA Live-Regions
  • ARIA relations and role tab attribute


Just add the script file after original widget js file or copy content into one file.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript" src="js/ui.ariaTabs_min.js"></script>


There are no more options or methods except for jQuery Address

Option Type Description
jqAddress.enable boolean enable browser history support
jqAddress.title.enable boolean enable title change
jqAddress.title.split string set delimiter string

You need to add the add the jQuery Address file, if you like to use browser history support. jQuery Address support is currently only available in master branch (jQuery 1.4, UI 1.8).

This text is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported Licence.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.