WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Bryan Garaventa
Date: Apr 26, 2015 7:58PM

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.