WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: building accessible javascript accordions?

for

From: Paul J. Adam
Date: Aug 1, 2013 8:06AM

Role=application should likely be avoided. NVDA can manually ESCape from forms mode using the ESC key. Really all you need is aria-expanded=true/false.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Aug 1, 2013, at 3:41 AM, Alastair Campbell < <EMAIL REMOVED> > wrote:

> 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
> > >