WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Thad C
Date: Apr 27, 2015 6:02PM

Thanks Bryan,

I have read your advise on past threads and you always have well thought
out and well educated comments. Just to simplify the conversation, is it
safe to say that if you have to use an accordion implementation for example
it already exists and you need to make it accessible then you would advise
the following:

- Use aria-expanded on the button that controls the display/hide of the
panel
- Do not explicitly set focus on any one item in the open panel
- Use aria-controls to associate the button with the panel. I don't believe
you mentioned this in the thread but I do see it in the example in your
second response.

Thanks for your great advise.



On Sun, Apr 26, 2015 at 6:58 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> Another example is available at
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Accordions/ARIA%20Accordion%20(Internal%20Content)/demo2.htm
>
> One thing to keep in mind, it's a flawed paradigm to have only one tab
> stop for an accordion control, because the content is rendered inline with
> the triggering element. This causes major accessibility issues for keyboard
> only users when expanded accordion panels include many active elements,
> since it is then impossible to maintain a contiguous tab order that matches
> the reading order of the page.
>
> Also, accordions are simple control types, and should not need to enforce
> a particular mode of navigation for users such as Applications Mode, which
> is confusing when all you want to do is just expand something and read the
> content. This is what happens when you use ARIA Tab markup on an accordion
> for example, which I don't agree with doing for this reason.
>
>