WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Nov 23, 2014 11:54AM

Judith

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 visibility:
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">
..
</div>
.. 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>

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

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


Examples:
Marco Zehe:
http://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
(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 "collapsed"
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.

code
<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;">
...
</div>

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
<ul
<li><a href=...">Tab 1</a></li>
</ul>
but this is not
<a role="listitem" href="x">Tab 1</a>

Cheers
-B




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
>
>
> <EMAIL REMOVED>
>
>
>
>
> > > >


--
Work hard. Have fun. Make history.