WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: multi-level tabpanel

for

From: Bryan Garaventa
Date: Jun 24, 2016 3:28PM

Technically aria-level is supported on role="tablist". We really should get support for that into browsers and ATs.


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, June 24, 2016 12:58 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] multi-level tabpanel

So there is a set of initial tabs, but when you select one of these, a second set of tabs might appear?
Basically you just put the tablist of subtabs into the tabpanel where appropriate.
A rough outline of the code would be something like the following:

<ul role="tablist">
<li role="presentation"><a href="#" role="tab" aria-selected="true"
aria-controls="tabp1">Tab 1</a></li>
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp2">Tab 2</a></li>
</ul>
<!-- tabpanel 1, contains its own tablist of sub tabs --> <div role="tabpanel" id="tabp1">
<!-- list of sub tabs -->
<ul role="tablist">
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp11">Sub tab 1</li>
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp12">Sub tab 2</li>
</ul>
<!-- tabpanel for sutab 1 -->
<div role="tabpanel" id="tabp11">
Some stuff in sub tabpanel 21, which is the inner one.
</div>
<!-- tabpanel for sub tab 2 -->
<div role="tabpanel" class="hidden" id="tab12"> hidden tabpanel for subtab 2</div>

</div> <!-- tabpanel 1 ends -->

<div role="tabpanel id="tabp2">
something
</div>



On 6/24/16, Moore,Michael (Accessibility) (HHSC) < <EMAIL REMOVED> > wrote:
> I am trying to figure out the correct design pattern for a multi-level
> tabpanel. We have an application using angular where we have a tab
> panel which is navigated through two rows of horizontal tabs. The tabs
> in the second row change depending upon which tab in the first row is selected.
> There are some top level tabs that do not open a second row of tabs.
>
> I think that using a nested list to hold the tablist will work but
> wanted to know if anyone has done this before and/or has an example of
> a working model. Bonus points if someone has an angular extension that does this.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission Civil Rights Office
> (512) 438-3431 (Office)
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.