Accessible Tabs 1.0

I hate sites whose pages are cluttered with links and graphics. Too much information. Too much scrolling. It's like the designer sneezed on a piece of paper and said, "that looks pretty good." Tabbed interfaces are a great way to dynamically hide and show content, but every implementation of tabs have left accessibility concerns, even the A List Apart article "Let Them Eat Cake."

Accessibility Concerns with Tabs
  1. Must be keyboard navigable
  2. Since people using screen readers might not know they are using tabs, how do you jump them to the tabs after they are done reading the content in a tab box?
  3. At the end of a long tab box, what's the easiest method of jumping to the next tab? Scrolling back up? Using a jump link?
  4. The script cannot manipulate the tag styles directly. It should only change class names so user agents in different media can decide how best to display these tabs. Tabs should be media independant.
  5. What if you want to bookmark the page on the current tab?
  6. What happens if I want more than one set of tabs on the same page?

1. Keyboard Navigation
This is pretty easy to solve. Most tab solutions use the anchor element, or the common <a> tag as the tabs. Using these for the tabs was a no-brainer. However, a little care has to be taken when using <A> tags, since they actually represent a link to another document, or to an anchor point on the current page.

The href for each tab link jumps to the appropriate tab box, making the tab links DO something if JavaScript is disabled. And with a little JavaScript, the link click can be disabled so the page doesn't reload. Problem 1 solved.

2. How to Get Back to the Tabs
No DHTML tabs I've seen so far provide an easy way to jump the user back up to the tabs using the keyboard. At first I thought access keys would be perfect, but instead opted for another link tag. It is placed below the markup for the entire tab structure so it provides "back to top" functionality when scripting is disabled, and also when it is enabled.

3. Navigating Long Tab Boxes
Scrolling is kind of a pain, especially if you can't see well or don't have a scroll wheel on your mouse. If a tab box is particularly long, it would be annoying to scroll back up to the tabs, and switch to the next tab. This was easily solved by placing links at the bottom of each tab box that, when clicked, switch to the next tab, AND jump the system focus to the new tab box. This scrolls the top of the tab box into view after switching to the new tab.

4. JavaScript Doesn't Mess With the Style
Since JavaScript can be read by any device that supports it, conceivably a hand held device could handle tabs too, but it might not be the best method for displaying that information on a 2 or 3 inch wide screen. The script must be media independant. The JavaScript only changes class names so CSS styles handle the visual changes, from non-tabbed, to tabbed, to switching tabs, every step of the way.

Now, user agents in any media can use the script to change the class names. Tabs will appear only if CSS styles for that media have been written, otherwise the page acts like the JavaScript never existed.

5. Bookmarking Tabs
"Let Them Eat Cake" from A List Apart made a great point. If you've got a long page, break it up and use JavaScript to hide and show only what you need. A problem creeps up when you want to bookmark the page on a certain tab. This implementation searches for the ID of a tab box in the window location when the page loads, then switches to the appropriate tab.

6. Support For Multiple Tab Boxes
Lastly, a tab class was created so you can have any number of tab structures on the same page. In Accessible Tabs 1.0, you can even nest tabs, however if you bookmark a tab, only one tab gets switched active. If you bookmarked a tab inside of a tab, the proper tabs wouldn't be made active. Right now this only works if you bookmark a page one tab deep.

(Keep reading below...)