E-mail List Archives
Thread: Tabset with X buttons to remove tabs
Number of posts in this thread: 5 (In chronological order)
From: Jesse Hausler
Date: Wed, Jun 04 2014 5:03PM
Subject: Tabset with X buttons to remove tabs
No previous message | Next message →
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
From: Jonathan Avila
Date: Wed, Jun 04 2014 5:08PM
Subject: Re: Tabset with X buttons to remove tabs
← Previous message | Next message →
> 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
From: Jesse Hausler
Date: Wed, Jun 04 2014 6:31PM
Subject: Re: Tabset with X buttons to remove tabs
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > > >
From: James Nurthen
Date: Wed, Jun 04 2014 8:48PM
Subject: Re: Tabset with X buttons to remove tabs
← Previous message | Next message →
Have you checked http://www.w3.org/TR/wai-aria-practices/#tabpanel
It says to use a keystroke or a popup menu to accomplish this.
We also add aria-describedby pointing to some text that says that the tab
can be removed so a user knows it is removable without requiring trial and
error.
Regards,
James
On Wed, Jun 4, 2014 at 5:31 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >
wrote:
> 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 ADDRESS 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 ADDRESS REMOVED =
> > [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > > > > > > >
> > > >
From: Jesse Hausler
Date: Tue, Jun 10 2014 5:26PM
Subject: Re: Tabset with X buttons to remove tabs
← Previous message | No next message
We've actually been following that spec, but i must have missed that line.
I still like Jonathan's method better, as it removed the need to know
keyboard commands.
Thanks for your help.
Jesse
On Wed, Jun 4, 2014 at 10:48 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> Have you checked http://www.w3.org/TR/wai-aria-practices/#tabpanel
> It says to use a keystroke or a popup menu to accomplish this.
> We also add aria-describedby pointing to some text that says that the tab
> can be removed so a user knows it is removable without requiring trial and
> error.
>
> Regards,
> James
>
>
> On Wed, Jun 4, 2014 at 5:31 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > 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 ADDRESS 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 ADDRESS REMOVED =
> > > [mailto: = EMAIL ADDRESS 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
> > > > > > > list
> > > messages to = EMAIL ADDRESS REMOVED =
> > > > > > > > > > > >
> > > > > > > >
> > > >