WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: multi-level tabpanel

for

From: Moore,Michael (Accessibility) (HHSC)
Date: Jun 24, 2016 2:48PM

Thank you Birkir,

This makes perfect sense. You just saved me from running down the wrong path.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, June 24, 2016 2: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.