No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CHANGELOG.md
README.md
html5shiv-printshiv.js
index.html
style.css
tabs.js
wig-blond.jpg
wig-brown.jpg
wig-red.jpg

README.md

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

Fully functioning back to IE8.

NB it's very alpha.

Usage

Currently it depends on specific SMACSS/BEM style class names on the <section>s, their headings, and a wrapper element. These are js-panel, js-panel__title and js-tab-ui respectively.

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.

Todo

  • use a config object
  • better keyboard interaction

Demo

View demo

Notes

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.