WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tabset with X buttons to remove tabs

for

From: Jesse Hausler
Date: Jun 4, 2014 6:31PM

That's not a bad idea!

So I think we'll set tabindex="-1" on the non active tabs, and tabindex="0"
on the active tab. This way mouse users can still click the links and close
out the tabs without needing to open them first.

Thanks Jonathan.

Jesse



On Wed, Jun 4, 2014 at 7:08 PM, Jonathan Avila < <EMAIL REMOVED> >
wrote:

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