WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: jQuery accordion widget - screen reader access

for

From: Birkir R. Gunnarsson
Date: Oct 30, 2015 1:49PM

The JQuery example is that of a tabbed interface, not an accordion.
For tabs:
- only the active tab is in the tab order
- When you open one tab, other tabs automatically close )unless you
are implementing a multi-selectable tab, which is not the case on this
example page).
For a true accordion it is better to use role="button" on the conrol
that expands and collapses content, also make sure all these are in
the focus order.
See examples at:
https://dequeuniversity.com/resources
Example 3 "Multiselect Accordion
'
" is closest to a true ccordion.
Example #4 acts like a tabbed interface until you shrink the viewport
to mobie (tablet or phone) but then transforms into an accordion.
You can copy, run and modify the source code of these examples if you
want to play around with it.
-B



On 10/30/15, John P. Lee < <EMAIL REMOVED> > wrote:
> Hi everyone,
>
>
> I'm troubleshooting an issue with screen reader access on a Drupal page that
> features an accordion. I've tested JAWS 16, NVDA, and VoiceOver (iOS
> version) on this page and discovered none of the screen readers will read
> the text content under the accordion header (the screen reader sees the
> header as a "form control"). However, text-to-speech readers such as
> ZoomText's AppReader will read the content when it is clicked on or
> selected.
>
>
> The web designers indicated that they are using the jQuery accordion widget
> (https://jqueryui.com/accordion/). When I use JAWS to text the accordion on
> the link above, it reads the content fine. The web designers said that they
> did modify the widget so that it allows all of the headers (aka "form
> controls") to remain open, so they are wondering if that tampering has
> somehow made it so that screen readers don't read the text content.
>
>
> Any insights or suggestions?
>
>
> Thanks,
>
> John
>
>
> John Lee, MS, OTR/L, ATP
> Assistive Technology Specialist
>
> Disability Resource Center, Rm 237
> Cal Poly, San Luis Obispo 93407
> Phone: (805) 756-5972
> Email: <EMAIL REMOVED>
> Skype: jlee245.drc
> URL: drc.calpoly.edu
> > > > >


--
Work hard. Have fun. Make history.