Progressively enhanced accessible tab UI
There’s a demo and code on github, but I wanted to do a quick post writing it up.
I consider Marco Zehe’s Advanced ARIA tip #1: Tabs in web apps the canonical blog post on accessible tabs and used it as my guide. Heydon Pickering also has an excellent example of a tabbed UI as part of his Practical ARIA Examples post.
I’ve also used a tiny piece of JS in the
<head> to add a class of
js-tabs to the
To make it really useful I will need to use a config object. It will also need to be able to create more than one set of tabs on the same page, which it can’t do now. I hope to get on to that soon.
I would love some feedback, pull requests and comments, so fill your boots!