WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Nov 24, 2014 5:25AM

I would apply the aria-expanded to the items that trigger the items to show or hide. - from your description this sounds like the list items. Using aria-expanded = true or false will let the screen reader user know that the item is expandable without requiring additional text.

Jon

> On Nov 21, 2014, at 6:55 PM, " <EMAIL REMOVED> " < <EMAIL REMOVED> > wrote:
>
> 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>
>
>
>
>
> > >