WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabpanel mark-up, possible effect of role=presentation

for

From: Léonie Watson
Date: Aug 6, 2015 11:08AM

> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
> On Behalf Of Birkir R. Gunnarsson
> Sent: 06 August 2015 17:26
> Be mindful of using aria-hidden="false" as it may override things inside the
> tabpanel that are supposed to be hidden.
> <div role="tabpanel" aria-hidden="false"> <div id="userOpinionSecret"
> style="display: none">WE know this user, he is not popular</div> </div>
> Users, at least of some screen readers, will see tthis text, because aria-
> hidden="false" overrides display: none; If you are using display: none type
> class to hide inactive tabpanels you do not need to add aria-hidden to that.

One way to keep these two things working together, and to ensure accessibility is not overlooked when the widget is updated in the future, is to use CSS attribute selectors to hook the visual display into the state of the ARIA.

So when aria-hidden="true", display:none; will always be set, and vice versa. This technique is used on this disclosure widget example:
http://ljwatson.github.io/design-patterns/disclosure-button1/disclosure.html

The CSS for this (in the above example) looks like this:

div[aria-hidden="true"]
{
display: none;
}

div[aria-hidden="false"]
{
display: block;
border: 1px #000 solid;
padding: 1em;
background: #555;
color: #FFF;
}

Léonie.