WebAIM - Web Accessibility In Mind

E-mail List Archives

building accessible javascript accordions?

for

From: Alastair Campbell
Date: Aug 1, 2013 2:41AM

Sorry to pickup an old thread, but I ran into some issues with the
accordion pattern.

Patrick H. Lauke wrote:
> it's worth having a look at the WAI ARIA authoring practices
> document, in particular the description of the accordion design pattern
> http://www.w3.org/WAI/PF/aria-practices/#accordion and the example
> provided http://www.oaa-accessibility.org/examplep/accordian1/

That seems to work well in an application context (where the 'content'
of the accordion is a form), but I'm getting issues when people need
to read the contents of each panel.

Taking that example, if you remove role="application" and have regular
HTML content in the panels, it works ok on VoiceOver (iOS/OSX), but
with NVDA (and I assume JAWs?) it is more difficult.

For example, you can browse (down arrow) to the accordion, you can
press down to go through all the headings and visible content (which
seems normal).You can select options, and as long as you avoid hitting
tab, all is good.

However, press tab and you invoke forms mode, where everything
changes. Arrowing down only moves between the tab headings, and you
have to navigate the 'content' with the tab key, which is only really
applicable for forms that don't have content.

Is this another case of: "ARIA is only indented for applications"?

That would be a shame, as show/hide in an accordion style is very
common and screen-reader users would benefit from the announcements
like 'expanded', but the switch of interaction style is very
confusing.

-Alastair