Finally, Accessible DHTML Tabs
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
- Must be keyboard navigable
- 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?
- 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?
- 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.
- What if you want to bookmark the page on the current tab?
- 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.
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.
5. Bookmarking Tabs
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...)
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)