WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-expanded state for show-hide interaction?

for

From: Joe Chidzik
Date: Nov 26, 2014 1:16AM

> I love the idea of keeping it simple and using Steve and Jonanthan's
> recommendations for using aria-expanded.
>
> I'll pass this on to the development team, unless there are operating systems/devices
> that require more, like perhaps older ones?

Hi Judith,

You raise a good point here regarding older devices. Afaik, whilst the aria-expanded attribute has good general support across mobile environments, it is not supported in iOS 7 (and older) (http://pauljadam.com/demos/ariasupport.html).

Using hidden (off-screen is one option) text to indicate the state is one option. This would create some duplication for user-agentsscreenreaders that do support aria-expanded - they would hear both - however you could use different text for the hidden text e.g. "show details" "hide details" to offset this issue.

So for a component like

<button aria-expanded="false">Mortgages<span class="element-invisible"> Show details</span></button>
<div>
<p>Contents here</p>
</div>

This would be announced by screenreaders that support aria-expanded as "Button collapsed Mortgages. Show details" - they would read both the hidden text and the aria-expanded state.

For iOS 7 devices, this should (I've not got a device handy to test) just read the hidden text e.g. "Button mortgages. Show details" which still conveys the button functionality. When expanded, the hidden text would need to be amended e.g.

<button aria-expanded="true">Credit cards<span class="element-invisible"> Hide details</span></button>
<div>
<p>Contents here</p>
</div>

An iOS7 device should read this as . "Button mortgages. Hide details"; again, the button functionality is conveyed to the user.

I'm sure there are other ways to address this issue as well, but this is one option.

Joe