WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Birkir R. Gunnarsson
Date: Apr 26, 2015 3:18PM

The OAA examples work quite ok actually, though I do not necessarily
agree 100% with the markup.
aria-expanded should be on the buttons that control the display/hide
of their associated panels rather than on the panels themselves.
(keep in mind, if we do this, the name of the button .. in this case
its value property, should not change, it should just be "topic 1" and
aria-expanded should be updated to indicate visibility of the
associated panel).
Also I do not think the focus should move from the button to the panel
it controls, especially not when the content is inline to the button
(comes right after the button, in content order).
You seem to be looking for an accessible accordion pattern (or a
variant thereof).
Simplest example can be found here:
http://www.3needs.org/en/testing/code/aria-expanded.html
An accordion example can be found e.g. at:
https://dequeuniversity.com/library/aria/tabpanels-accordions/sf-tabless-multiselect-accordion
Cheers



On 4/26/15, Howard Kramer < <EMAIL REMOVED> > wrote:
> Hi Thad,
>
> What answer did you come up with? I didn't see it in your post. I've been
> looking for an accessible accordion also.
>
> Thanks,
> Howard
>
> On Sun, Apr 26, 2015 at 8:11 AM, Thad C < <EMAIL REMOVED> > wrote:
>
>> Question answered. Thanks!
>>
>> On Sat, Apr 25, 2015 at 9:10 PM, Thad C < <EMAIL REMOVED> >
>> wrote:
>>
>> > Greetings Group,
>> >
>> > I am looking for examples of accessible hide/show panels. The following
>> > Open Ajax Alliance examples seem to illustrate the functionality I am
>> > looking for:
>> >
>> > http://www.oaa-accessibility.org/examplep/hideshow1/
>> >
>> > In this example a user activates the "Hide Topic 1" button, the
>> associated
>> > panel is shown, focus goes to the associated panel however the content
>> > inside *is not* read by assistive technology
>> >
>> > However if a user activates the "Hide Topic 2" button, the associated
>> > panel is shown, focus goes to the associated panel and the content
>> inside*
>> > is* read by assistive technology. This is the behavior I would like to
>> > emulate. Can anyone give me a technical explanation of why the "Hide
>> Topic
>> > 2" scenario reads the content inside the panel and the "Hide Topic 1"
>> does
>> > not?
>> >
>> > If anyone has other example of this functionality it would be greatly
>> > appreciated as well
>> >
>> > Thanks for your help
>> >
>> >> >> >> >>
>
>
>
> --
> Howard Kramer
> Conference Coordinator
> Accessing Higher Ground
> 303-492-8672
> cell: 720-351-8668
>
> AHEAD Association of Higher Education and Disability
> > > > >


--
Work hard. Have fun. Make history.