WebAIM - Web Accessibility In Mind

E-mail List Archives

Tabset with X buttons to remove tabs

for

From: Jesse Hausler
Date: Jun 4, 2014 5:03PM

Hi everyone,

We're working on building a tabset component, and are following the ARIA
authoring practices guide for keyboard accessibility (and aria).

This means that all of the tabs are one focus stop, with right and left
arrow to navigate from tab to tab.

Here's the catch... we have little x buttons on each tab, so users can
remove them from the page. The "remove tab" x's are currently anchors, but
this causes a problem.

Here's what happens.

When i press the Tab-Key, I move through the close anchors before entering
the selected tab panel. So if i have 20 tabs open and i want to enter the
second tab, i have to tab through 20 "remove tab" links before entering the
panel.

With Jaws, i can do Jaws+Alt+M and move inside the tab panel without issue.
However, that doesn't help other keyboard users...

Any thoughts or advice?

Thanks,
Jesse