WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: multi-level tabpanel

for

From: Birkir R. Gunnarsson
Date: Jun 24, 2016 1:57PM

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


--
Work hard. Have fun. Make history.