WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: TRAUTWEIN_PAUL
Date: Feb 4, 2019 4:07PM

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