WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Navigating from tab to tab panel

for

From: Sailesh Panchang
Date: Sep 27, 2017 10:42AM

Mark,
The tab panels all (except the active tab) have to be hidden ie. not
rendered for all users so display: none should be toggled. No use for
aria-hidden IMO.

Birkir-
For tablist the 'required owned' is only tab ... so that's quite clear.
Accordion is a different UI. It is pretty much a list of links
stacked vertically with expand/collapse functionality. The authoring
guide too describes it in this manner.
Yes there are similarities but if the intent is an accordion, then one
should not use tablist, tabpanel ... that will confuse users because
tabs are generally horizontal. One does not have multi select on tabs
generally but it is more common in accordions.
Best wishes,

On 9/27/17, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> Mark
> What I would do to rsolve his is to give all tabpanels a tabindex of
> 0. That way the user can reliably navigate from the tab to the
> tabpanel by pressing the tab key (only the active tab is in the focus
> order) (see why the label "tab" is so confusing, it applies to the tab
> panel, the tab control and the tab key).
> Yes, on touch-screen devices you don't have the benefit of using arrow
> keys to jump between tabs (at least not on iOS), you cannot alter the
> swipe order on those devices (except possibly though some serious
> manipulation of the aria-owns attribute which I suspect would not
> work).
>
> Sailesh, good points. I was looking primarily at the "required owned
> elements" section of the spec (I can dig up the exact link later).
> I just wish the spec would use a clearer language, so that, e.g. aXe
> (or any accessibility checker) would fail an element with
> role="tablist" that contains an element with role="tabpanel" (or any
> element that does not have either role="presentation" or role="tab").
> When I was providing aXe feedback I brought up this idea but, based on
> my memory, the team did not feel the spec was explicit enough to add
> this check.
> This would also address the question of tabs and tabpanels. If a
> tablist cannot contain an element with role tabpanel, you can't
> implement tabs accordion style.
>
>
>
> On 9/27/17, Mark Magennis < <EMAIL REMOVED> > wrote:
>> I'm assessing an implementation here where, when a tab is selected using
>> Enter, all tabs are given aria-hidden="true". This means that arrowing
>> down
>> skips past them to the open panel. The problem is, the tabs are never
>> unhidden, so they are subsequently completely inaccessible.
>>
>> I wonder is there a good way of clearing aria-hidden when the user has
>> skipped past the hidden tabs? I guess this would involve clearing it when
>> user enters the tab panel and when the user TABs or SHIFT+TABs out of the
>> tab list.
>>
>> Is it feasible to do this using JS in a reliable way that doesn't have
>> unwanted side effects?
>>
>> Mark
>>
>> Mark Magennis | Accessibility Support Manager
>> InterAccess.ie <http://interaccess.ie/>; - Accessible UX
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >


--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
Phone 703-225-0380 ext 105
Mobile: 571-344-1765