WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]scrollable horizontal tabs - functionality?

for

From: TRAUTWEIN_PAUL
Date: Feb 5, 2019 12:35PM

Hi Isabel,

I see where you are going with this. The idea of using both the tab key and the arrow keys while in a screen reader didn't occur to me. That's just my inexperience with the capabilities of the different screen readers.
I'll do some more research and tests.

The other thought I had was to order the tab containers in between each tab directly in the code, and display and hide them using Javascript and absolute positioning. That may be too clunky.

Thanks for your help.
Paul


On 2/5/19, 8:00 AM, "Isabel Holdsworth" < <EMAIL REMOVED> > wrote:

Hi Paul,

I understand where you're coming from, but this would have the
disadvantage of breaking the tablist into two separate pieces, which
could itself introduce a reading order issue. Also, if the active tab
panel contains elements that would become part of the tab order, it
would be difficult for screenreader users to work out where one chunk
of the tablist ends and the next begins.

A good alternative is to have a single tab stop for the tablist, and
have users navigate the tabs using the arrow keys. Then the next tab
stop after the tablist could be the container that holds the active
tab panel.

So the user tabs to the tablist, arrows to their desired tab, and
presses Tab again to hear the active content beneath the tabs.

I hope this makes sense.

On 04/02/2019, TRAUTWEIN_PAUL < <EMAIL REMOVED> > wrote:
> Hi all,
>
> The problems I've always had with this type of "Tab" is the reading order.
>
> Every solution I've tested requires the user to navigate through the tabs
> before they reach the content associated with the tabs.
>
> Diane needs a lot of tabs, but even if you only had three. (example:
> "Events," "Resources," and "Links")
>
> If "Events" is the default tab and the content is visually available, the
> user would still have to click through the other two tabs before they would
> hear the "Events" content.
> If they were to choose "Resources" they'd have to click through the "Links"
> tab before they would hear the "Resources" content.
>
> Ideally, I'd want the reading order to be this:
> "Events" tab. (chosen - default)
> "Events" content.
> "Resources" tab. (if chosen)
> "Resources" tab.
> "Links" tab. (if chosen)
> "Links" content.
>
> If any of the tabs are not chosen, the user would move directly to the next
> tab. Like this:
> "Events" tab. (chosen - default)
> "Events" content.
> "Resources" tab. (not chosen)
> "Links" tab. (not chosen)
> On to the rest of the content of the page - if any.
>
> Any thoughts on this? Of if anyone has found a better solution, I'd love to
> expand this discussion.
>
> Thanks.
> Paul Trautwein
> Web Coordinator, Santa Monica College
>
> On 2/1/19, 12:18 PM, "Tomlins Diane" < <EMAIL REMOVED> >
> wrote:
>
> Basically it's what Brian describes, it's kind of a mashup of tabs and a
> carousel, w/o any automatic sliding going on. Here's a close example of
> what our developer did - https://www.bootply.com/l2ChB4vYmC
> Our dev did add previous and next buttons to it, pretty much like what
> you see with carousels, and they're positioned above the tabs. While I can
> navigate the tabs with the keyboard, it gets a little weird with NVDA. You
> can get to the controls, after you've tabbed thru all of the tabs, but then
> it's a real stinker to get back to the actual tabs. It'll switch back and
> forth between the previous and the next, so it seems trapped there. I
> managed to get out of the buttons after I back-tabbed out of the "next"
> button, but that took going back and forth between the two a couple of times
> before even that worked.
>
> So, a SR user can navigate the tabs, the thing with the buttons bothers
> me though. Maybe I'm making more of it than I need to?
>
> Thanks,
> Diane R Tomlins
> HCA Healthcare | Accessibility SME
>
> >I've seen this before. If it's what I think it is, it is a set of tabs
> that is then displayed in a horizontally scrollable container, presumably
> because it is wider than the >available space. As long as the entire set of
> tabs is accessible, and there aren't any carousel type controls on the
> container, I don't see where any further action is >needed.
>
> On Fri, Feb 1, 2019 at 2:15 PM Graham Armfield <
> <EMAIL REMOVED> > wrote:
>
> > Hello Diane,
> >
> > Could you amplify what you mean by 'scrollable' horizontal tabs.
> >
> > Is this actually a tab panel? If so I'm wondering where the scrolling
>
> > comes in.
> >
> > Or perhaps you are referring to a 'carousel' or 'slider' - a series of
>
> > panels with images or text that may advance automatically, but may
> > also have blobs which allow user to jump to a specific panel?
> >
> > If you could clarify, then we can ensure to give you the best advice.
> >
> > Regards
> > Graham Armfield
> >
> >
>
>
>
> > > > >