WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Bryan Garaventa
Date: Nov 23, 2014 2:35PM

Just as a quick note about aria-hidden=false and VoiceOver, this is actually a feature, so it's likely to become more widely
implemented in the future.
Reference: http://lnkd.in/bA8ZaPP

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Sunday, November 23, 2014 10:55 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] aria-expanded state for show-hide interaction?


What you are describing is a typical tabbed interface (at least in the standard world of desktop).
For tabs one needs to have a few things in mind:
1. The list container around the available tabs should have an ARIA role of "tablist".
2. Links that one clicks to update the content have a role of "tab"
- have aria-controls pointing to the id of the content that is displayed or hidden
- the active tab (tab that controls the visible content) should have aria-selected="true" (this must be updated dynamically via
Javascript so that only one tab is selected at any one time and that is the tab associated with the visible content).
3. The container for the actual content should have a role of tabpanel and aria-labelledby pointing to the active tab (same tab that
has aria-selected="true" and aria-controls pointing to the container id).
4. using CSS display techniques is enough to show/hide content for all users (as long as you hide CSS using display: none or
hidden to hide it). Using aria-hidden can be done but it has bugs with it e.g. on Voiceover. If the container has
aria-hidden="false" but there is a component inside hidden by other means, Voiceover (at least in version 8.1) will not respect
this, and will announce the component.
<div aria-hidden="false">
<input type="hidden" id="x" value="default input value"> ..
.. Voiceover will announce the hidden input as user swipes through the content.
The following code mock up (tab 2 is active) <div role="tablist"> <a href="javascript to show hide" id=tab1" role="tab"
aria-controls="content1">Tab 1</a>
<a href="javascript to show hide" id=tab2" role="tab"
aria-controls="content2" aria-selected="true">Tab 2</a> </div> <div id="content1" role="tabpanel" aria-labelledby="tab1"
style="display: none;">

<div id="content2" role="tabpanel" aria-labelledby="tab2"> You can see this content!!!

Note: you can use one container for all the tabs, and just populat it with the appropriate content when the associated tab is

Marco Zehe:
(www.whatsock.com also has great examples and articles).

I know that a fully tabbed interface may not work very well for mobile, so one can do a much simpler version.
Each link that expands or collapses a section should have aria-expanded attribute, set to "true" when content is visible and "false"
if it is hidden.
Note: compliment aria-expanded attributes on links with the title attribute of the link to say "expanded" when visible and
when hidden. In your case the title of the active link should just say "selected" since only one tab can be active.
Voiceover prior to version 8 did not announce aria-expanded attributes at all.
Voiceover 8 and above announces aria-expanded incorrectly
- says "collapsed" when aria-expanded="true" and
- "expanded" when aria-expanded = false).
I mention this because you said you are creating a mobile component specifically, so Voiceover support is essential for any
accessible component targeted at mobile.

<a href="javascript" aria-expanded="true" title="selected">Tab 1</a> <div id="tab1"> Visible content </div> <a href="Javascript"
aria-expanded="false">Tab 2 </a> <div tab2 style="display: none;"> ...

Sure you can nest the links in list items.
But you can never map an actionable component to a listitem, heading or any other non-interactive aria role.
Users do not expect to be able to activate a list item.
so this is ok
<li><a href=...">Tab 1</a></li>
but this is not
<a role="listitem" href="x">Tab 1</a>


On 11/21/14, <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
> > > list messages to <EMAIL REMOVED>

Work hard. Have fun. Make history.