WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Isabel Holdsworth
Date: Feb 4, 2019 4:47AM

Hi Diane,

The example you posted doesn't have any structural information that
flags up to screenreader users that we're dealing with a tablist.

Ideally the set of tabs should only take up a single slot in the
document's tab order, and the arrow keys should move the focus along
the tab strip and expose the content belonging to the active tab.

But if it works this way, ARIA needs to be used to let sscreenreader
users know they've landed on a tablist, and to cause the screenreader
to offer contextual help on how to navigate this custom component.

I like the simple example at:

https://van11y.net/downloads/tab-panel/demo/index.html#id_second

This only has 3 tabs, but there's no reason why you couldn't extend it
and scroll the active tab and its adjacent siblings into view as
necessary.

I hope this is useful.

Cheers, Isabel

On 01/02/2019, 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
>>
>>
> > > > >