WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Isabel Holdsworth
Date: Feb 6, 2019 4:09AM

Hi Paul,

> 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.
Can you run that past me again - I'm not sure I understand :-)

Cheers, Isabel

On 05/02/2019, TRAUTWEIN_PAUL < <EMAIL REMOVED> > wrote:
> 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
> > >
> > >
> >
> >
> >
> > > > > > > > > >
>
>
>
> > > > >