WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Troubleshooting hint on tab-panel

for

From: Birkir R. Gunnarsson
Date: Apr 19, 2016 3:35PM

Bryan is probably right.
I have often seen developer put role="tab" on what should be the
tabpanel content.
It makes a bit of sense, especaily if you want to make accessible tabs
but don't spend enough time reading the manual (it is a little tricky
the first time).
The 3 steps of accessible tab ARIA roles and attributes:
1. All the tabs need to be contained in an element with role="tablist"
(that way screen readers can announce the number of tabs).
2. The element that is activated to show different content
* has role of tab
* has an aria-controls attribute pointing to the ID of the tabpanel.
* has aria-selected="true" if it is active.
3. The container that is displayed or hidden when a tab is activated
* has a role of tabpanel (not tab)
* has aria-labelledby pointing back to the id of the tab that controls it.

The rest is keyboard accessibility, CSS and focus management.



On 4/19/16, Moore,Michael (Accessibility) (HHSC)
< <EMAIL REMOVED> > wrote:
> Thanks Bryan,
>
> I will do that. I am away from the test environment today but it sounds like
> that is correct. I think that the developers may have put the tab role on
> the area that should have the tabpanel role. I will look for that first.
>
> You may have saved me a few hours of digging...
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
>