Progressively enhanced accessible tab UI

2014-05-04

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.

The main difference between my version and theirs is that mine doesn’t have a list of skip links in the source that are enhanced to tabs. The tabs in my code are generated by JavaScript using the titles of the sections that become tab panels as tab names.

I’ve also used a tiny piece of JS in the <head> to add a class of js-tabs to the <html> element. This prevents a FOUC between page load and the relevant JavaScript running. The only noticeable UI change is the tabs appearing after everything else.

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.

As it stands however, it creates a working tabbed UI in IE8+ and Android 2.1+, falling back to a page with title sections in browsers where the JavaScript I used isn’t supported.

I would love some feedback, pull requests and comments, so fill your boots!