Fork me on GitHub

Header

Important notice about the «ADG» project

Important notice: Due to large demand, the «Accessibility Developer Guide» project (currently a proof of concept with low priority) will become a top priority priority in 2017. We will make this guide become what it deserves to be for so long already: a comprehensive resource for all folks interested in accessibility. For this we need your support!

Tab panel widgets

Tab panels help to split up a page's content into smaller and thus more digestible parts which can toggled visible one at a time. They can be thought of "pages inside a page".

Just so you know: accordions usually solve a similar use case.

Notice: Tab panels are also called "tabs" or "tabbed interface controls" (in German sometimes: "Reiter"). We call them "tab panels" to avoid confusion with the "tab" key on the keyboard.

Preconditions

Desktop

Software

Screenreaders
NVDA, version 2015.3
JAWS, version 16.0.4463
Browsers
Internet Explorer (IE), version 11.0.9600.18059
Firefox (FF), version 41.0.2

Considered use-cases

  • Keyboard-only
  • JAWS on IE and FF
  • NVDA on IE and FF

In screenreaders, interaction with the tab panel in both browse and focus mode was tested.

Take this into consideration

Read this before using any widget!

Before getting too excited about all those fancy 3rd party widgets outthere, you better read about the things to consider when choosing a widget.

Also, you should be aware of how we review widgets.

Got something to say?

Help us managing this list!

Know another promising widget? Have different results when testing? Have other opinions about what's important?

You are very welcome to bring yourself in.

Results

NameGeneral informationAnnoyancesVerdict
Athena ICT Tabs
  • Uses ARIA
  • Intercepts / keys
  • JAWS + FF/IE
    • Focus mode is toggled on and off whenever a tab is activated using Enter
  • NVDA + IE
    • In browse mode, tabs are announced inline and thus are not specifically selectable using /
  • VoiceOver (iOS) + Safari
    • When selecting a tab, it's announced twice
Recommended
Barrierefreies Webdesign Tabs
  • JAWS + FF/IE
    • Focus mode is toggled on and off whenever a tab is activated using Enter
  • VoiceOver (iOS) + Safari
    • When selecting a tab, the focus sometimes seems to jump somewhere into the content randomly
Recommended
Accessible Culture Tabs
  • Uses ARIA
  • Intercepts /// keys
  • Of the different versions listed, we recommend #2b and #3a
  • JAWS + FF/IE
    • Focus mode is toggled on and off whenever a tab is activated using Enter
  • JAWS + IE
    • In focus mode, gives instruction to use Space to open tab, but doesn't work
Recommended
OAAA Tab Panel
  • Uses ARIA
  • Uses role="application"
  • Intercepts /// keys
For applications only
jQuery Accessible tab panel system
  • Uses ARIA
  • Intercepts /// keys
  • NVDA + IE
    • No feedback when activating a tab
  • VoiceOver (iOS) + Safari
    • When selecting a tab, it's announced twice
Not recommended
Twitter Bootstrap Tabs
  • Uses ARIA
  • JAWS + IE
    • Once a tab is selected, focus mode is activated and other tabs can only be selected by leaving focus mode again
    • Announces expanded status as "collapsed"
  • NVDA + IE
    • When opening a tab, its content is announced directly, but the focus itself stays on the tab
Not recommended
Whatsock Tabs (ARIA)
  • Uses ARIA
  • Intercepts /// keys
  • JAWS + FF/IE
    • Focus mode is toggled on and off whenever a tab is activated
Not recommended
Whatsock Tabs (non-ARIA)
  • No ARIA used
  • JAWS/NVDA + FF/IE
    • No feedback when activating a tab
  • NVDA + IE
    • In browse mode, tabs are announced inline and thus are not specifically selectable using /
Not recommended
jQuery UI Tabs
  • Uses ARIA
  • Intercepts /// keys
  • JAWS/NVDA + FF/IE
    • Announces expanded status as "collapsed"
  • NVDA + FF/IE
Not recommended
jQuery Accessible Tabs
  • No ARIA used
  • Hybrid of jump links and tab panel
  • Allows navigation between tabs only using Tab key
  • JAWS/NVDA + FF/IE
    • Buggy (behaviour becomes unpredictable when playing with it)
Not recommended
Accessible jQuery UI Tabs
  • Uses ARIA
  • Intercepts /// keys
  • JAWS + IE
    • Focus jumps to the beginning of the document when activating a tab
  • NVDA + FF
    • No feedback when activating a tab
Not recommended
Heydon Works Tabs
  • Uses ARIA
  • Intercepts / keys
  • NVDA + IE
    • In browse mode, tabs are announced inline and thus are not specifically selectable using /
    • Can't be controlled in browse mode (tabs must be entered using Tab to be controllable)
Not recommended