Accessible Tabs: 4 Recent Projects

[Edit on 2010-01-21:
I was incorrect in the original post (below). I should not have said I wanted a solution that does not use JavaScript.  What I want is one in which JavaScript degrades gracefully. (This means it will get and stay out of the way for users who have it disabled in their Web browsers.)]

Original Post

I have been asked to implement a tab-based, site-navigation menu bar.  An essential feature is that a click to each tab opens a new page or presents a drop-down menu of links to other pages. I suspect no accessible way to accomplish this exists, nor is there one for what I really want: such a menu that uses WAI ARIA but not JavaScript.

I have found four recent projects that attempt to create accessible tabs.

Example 1: No JavaScript, but no WAI ARIA

Dirk Ginader describes his effort as a “… jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screen reader users without support for WAI ARIA …”.

• Mr. Ginader’s article:  jQuery Accessible Tabs – How to make tabs REALLY accessible. (Published February, 2009.)
• Mr. Ginader has made available a demo of his project.
• The latest project code is located at GitHub / ginader / Accessible-Tabs.

Examples 2 & 3: WAI ARIA, but use JavaScript

The Yahoo User-Interface Team developed an “Accessible Tab View” described by Ian Pouncey as using WAI ARIA to a great degree, and as including instructional text for screen reader users.

• Mr. Pouncey’s article: Accessible Tabs in the new Yahoo Homepage – recreated with YUI3 and WAI-ARIA. (Published October, 2009.)
• The Yahoo Developer Network provides a demonstration.
• The latest code and instructions can be found in: Focus Manager Node Plugin: Accessible TabView.

A project by Felix Nagel supports “… AJAX, collapsible content, open on mouse over …” and “… tabindex …”.  Its WAI ARIA features are “… labelledby, aria-role, aria-hidden, aria-expanded, aria-selected …” and “… aria-controls …”.

• Mr Nagel’s article: jQuery UI Tabs made accessible (written in German). (Published November, 2009.)
• Mr. Nagel has demonstrations of the various versions.
• The latest project code is located at GitHub / fnagel / jQuery-Accessible-RIA.

Example 4: No WAI ARIA, but has a version without JavaScript

Another project, by Jon Plante, is described by him as “… search-engine-friendly, handicap-accessible Ajax tabs using MooTools and PHP …”.

• Mr. Plante’s article: Accessible Ajax Tabs With MooTools. (Published May, 2009.)
• Mr. Plante’s demos with JavaScript Turned Off and On.
• The latest code is located in Tabs in MooTools 1.2.

Project Shortcomings, At Least For My Purposes

• None of the four projects use WAI ARIA but not JavaScript.
• They use tabs that link to content on the same page. In Mr. Ginader’s article, in response to a comment asking if tabs could be linked to separate pages, he says it “… would be a big accessibility problem …” and that it “… will never be implemented …”.
• None have drop-down menus for their tabs, nor do any of the other projects I found.

Request

I found other jQuery projects that were similar to the above-described ones.  I also found many older, related projects that use now out-of-date techniques.  If you know of a recent source for accessible tabs, especially that have drop-down menus, please contact me or post a comment.  Thank you.