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 …”.

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.

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 …”.

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 …”.

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.

Tags:

2 Responses to “Accessible Tabs: 4 Recent Projects”

  1. Jan Philipp Pietrzyk Says:

    I have written a MooTools Accessible Tabs Class based on Dirk Ginaders Script. Its located at

    http://www.must-art.de/blog/items/mootools-accessibletabs.html

    Forge Version to follow.

    Like

  2. Richard Says:

    Great resource. Have spent ages trying to find tabs that degrade. They might not have suited your purpose but they suited mine just fine!

    What is is with the new breed of javascript authors that they no longer bother with users who switch javascript off?

    Like

Comments are closed.


%d bloggers like this: