WebAIM - Web Accessibility In Mind

E-mail List Archives

aria-expanded state for show-hide interaction?

for

From: Judith.A.Blankman@wellsfargo.com
Date: Nov 21, 2014 4:51PM

I'm working on specifications for a hard coded component for a smartphone interface. I won't be doing the coding, I just need to help our designers point developers in the right direction.

* There are 6 links in a list, visually formatted like a bar with an icon and text
* The entire bar and its contents is tappable
* Tapping the bar expands or collapses a container that displays some brief content
* Only one content area is open at any one time
* If a section is open and someone taps on another section, the section that was open closes

I assume we should include some hidden text ("expand") associated with the visible link text to indicate that the link expands to reveal the content when it's closed, and vice versa.

Is the state aria-hidden (true or false) for the container sufficient to indicate that the section is collapsed or expanded?

Or should we also use the state aria-expanded (true or false) and apply it to <li> tags that would have a role="listitem"?

I'm looking at this WAI-ARIA page for guidance
http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded


Thanks!


Judith Blankman

Accessibility Strategist
Customer Experience



Wells Fargo Digital Channels Group | 550 California Street, 2nd floor | San Francisco, CA 94104

MAC A0122-020

Tel 415-947-6583 | Cell 415-601-1114 | Fax 415-974-7452


<EMAIL REMOVED>