Progressively enhanced accessible tabbed UI
When a page contains a set of
<section> elements with titles this script generates an unordered list that works as a tab UI. The last viewed tab is stored in
Fully functioning back to IE8.
NB it's very alpha.
It also has a small script in
<head> that is used to eliminate FOUC. It replaces the
no-js class name on the root element with
js-tabs which is used in the CSS.
None of the CSS is required however, the tabs work as a plain unordered list if none is applied.
For keyboard interaction tab to the first tab, use the arrow keys to move between tabs, and press space to show the corresponding panel.
- use a config object
- better keyboard interaction
This was inspired by Marco Zehe's Advanced ARIA tip #1: Tabs in web apps.
Heydon Pickering has published an excellent jQuery example which uses a
<ul> in the source with skiplinks to the sections.