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 3:37PM

Thanks Bryan

I was misinterpreting this feature.
I thought that aria-hidden only overrode the container element, not
its children.
so
<div aria-hidden="false" style="display: none;">
Some content, this is all visible to screen readers, but invisible to
the rest of the world.
<a href="http://www.blinconspiracy.com"Take over the world</a>
</div>

but if you explicitly declare a child of the container as hidden that
would override the semantics of the parent
<div aria-hidden="false" style="display: none;">
Some content, this is all visible to screen readers.
<a href="http://www.blinconspiracy.com"Take over the world</a>
<input type="hidden" value="AlreadyDone"> <!-- this should be hidden
still, I thought -->
</div>

I see from the context that my understanding is probably not true.
I think this opens the door to a lot of confusion, but that is
discussion for another area.
Thanks for clearing this up!
-B



On 11/23/14, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> 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
> And
> http://www.w3.org/2013/12/16-pf-minutes.html
>
>
>
> -----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?
>
> 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>
>>
>>
>>
>>
>> >> >> list messages to <EMAIL REMOVED>
>>
>
>
> --
> Work hard. Have fun. Make history.
> > > messages to <EMAIL REMOVED>
>
> > > >


--
Work hard. Have fun. Make history.