WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Nov 25, 2014 12:52PM

Judith

Sounds great.
Just remember my point regarding a complementary title on the
component that expands and collapses accordions. aria-expanded support
is still problematic on mobile devices and users will need the
additional title element, at least in the short term.
<!-- when collapsed -->
<a title)"click to open" aria-expanded="false">Peronal info</a>
<!-- when visible -->
<a title)"click to close" aria-expanded="true">Peronal info</a>


On 11/25/14, <EMAIL REMOVED>
< <EMAIL REMOVED> > wrote:
> Thanks for the input, everyone.
>
> Birkir, just to clarify, we have a show/hide component that on desktop is
> presented vertically.
>
> Here's an example:
> https://www.wellsfargo.com/privacy-security/fraud/protect/fraud-tips/
>
> This content hasn't been migrated to a smartphone interface yet, but other
> pages have.
>
> We also have pages with tabbed content. An example:
> https://www.wellsfargo.com/credit-cards/rewards/
>
> That content, when migrated to a mobile device, will be presented as a
> show/hide component. There is also another layer of show/hide in the FAQ
> "tab."
>
> I don't think we need to communicate the first set of show/hide (formerly
> tab) content as a tabbed component on a mobile device. We do need to
> communicate the fact that it expands/collapses to reveal more info.
>
> I love the idea of keeping it simple and using Steve and Jonanthan's
> recommendations for using aria-expanded.
>
> I'll pass this on to the development team, unless there are operating
> systems/devices that require more, like perhaps older ones?
>
> Judith
>
> On 11/23/14 2:37 PM, "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
> wrote:
>
>>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
>>>
>>>
>>>
>>>