E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: John P. Lee
Date: Fri, Oct 30 2015 1:32PM
Subject: jQuery accordion widget - screen reader access
No previous message | Next message →

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 ADDRESS REMOVED =
Skype: jlee245.drc
URL: drc.calpoly.edu

From: Birkir R. Gunnarsson
Date: Fri, Oct 30 2015 1:49PM
Subject: Re: jQuery accordion widget - screen reader access
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> Skype: jlee245.drc
> URL: drc.calpoly.edu
> > > > >


--
Work hard. Have fun. Make history.

From: Moore,Michael (Accessibility) (HHSC)
Date: Sun, Nov 01 2015 3:19PM
Subject: Re: jQuery accordion widget - screen reader access
← Previous message | No next message

You need to force the screen reader out of forms mode and then it should read fine

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)