WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tabset with X buttons to remove tabs

for

From: Jonathan Avila
Date: Jun 4, 2014 5:08PM

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

I make only the currently active tab's close X focusable by removing the
others from the focus order.

Jonathan
SSB BART Group

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
Sent: Wednesday, June 04, 2014 7:03 PM
To: WebAIM Discussion List
Subject: [WebAIM] Tabset with X buttons to remove tabs

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
messages to <EMAIL REMOVED>