E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: building accessible javascript accordions?

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

From: McMorland, Gabriel
Date: Thu, Jun 20 2013 2:57PM
Subject: building accessible javascript accordions?
No previous message | Next message →

Is it possible to build javascript accordions or "hide and display" panels that are accessible to screen reading software?I am testing a website with JAWS screen reading software and was not able to expand the accordion menus on a page. Our team would like to leave them in place if we can find a way to make them accessible.

Is it possible to set up accordion menus that are accessible to screen readers?

How do we do it?

Thanks

From: Paul J. Adam
Date: Thu, Jun 20 2013 3:12PM
Subject: Re: building accessible javascript accordions?
← Previous message | Next message →

Yes it's possible to make ANY JavaScript widget accessible if coded with accessibility in mind ;)

http://jqueryui.com/accordion

You could also use aria-expanded=true/false http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

Sounds like you may be missing some focusability on the UI elements that do the expanding? Or the up/down arrow keys to move focus and enter or spacebar may be the method to expand/collapse like in the jQuery UI example.

Good luck!

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 20, 2013, at 3:57 PM, "McMorland, Gabriel" < = EMAIL ADDRESS REMOVED = > wrote:

> Is it possible to build javascript accordions or "hide and display" panels that are accessible to screen reading software?I am testing a website with JAWS screen reading software and was not able to expand the accordion menus on a page. Our team would like to leave them in place if we can find a way to make them accessible.
>
> Is it possible to set up accordion menus that are accessible to screen readers?
>
> How do we do it?
>
> Thanks
> > >

From: Bryan Garaventa
Date: Thu, Jun 20 2013 3:50PM
Subject: Re: building accessible javascript accordions?
← Previous message | Next message →

Yes, there are many ways to do this effectively. You are welcome to view
working accordion implementations in the package at
https://github.com/accdc/tsg
If it's helpful, which have been fully tested for screen reader and keyboard
accessibility, as well as for iOS touch screen support using Voiceover.

The concepts and principles of which, are all fully documented.

----- Original Message -----
From: "McMorland, Gabriel" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 20, 2013 1:57 PM
Subject: [WebAIM] building accessible javascript accordions?

> Is it possible to build javascript accordions or "hide and display" panels
> that are accessible to screen reading software?I am testing a website with
> JAWS screen reading software and was not able to expand the accordion
> menus on a page. Our team would like to leave them in place if we can
> find a way to make them accessible.
>
> Is it possible to set up accordion menus that are accessible to screen
> readers?
>
> How do we do it?
>
> Thanks
> > >

From: Akshi Kakar
Date: Fri, Jun 21 2013 12:18PM
Subject: Re: building accessible javascript accordions?
← Previous message | Next message →

I have the same question.

Thanks,

Akshi.

-----Original Message-----
From: McMorland, Gabriel [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, June 20, 2013 4:57 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] building accessible javascript accordions?

Is it possible to build javascript accordions or "hide and display" panels that are accessible to screen reading software?I am testing a website with JAWS screen reading software and was not able to expand the accordion menus on a page. Our team would like to leave them in place if we can find a way to make them accessible.

Is it possible to set up accordion menus that are accessible to screen readers?

How do we do it?

Thanks

From: Trafford, Logan
Date: Fri, Jun 21 2013 12:23PM
Subject: Re: building accessible javascript accordions?
← Previous message | Next message →

Yes, using pure css and no javascript

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Akshi Kakar
Sent: June 21, 2013 2:19 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] building accessible javascript accordions?

I have the same question.

Thanks,

Akshi.

-----Original Message-----
From: McMorland, Gabriel [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, June 20, 2013 4:57 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] building accessible javascript accordions?

Is it possible to build javascript accordions or "hide and display" panels that are accessible to screen reading software?I am testing a website with JAWS screen reading software and was not able to expand the accordion menus on a page. Our team would like to leave them in place if we can find a way to make them accessible.

Is it possible to set up accordion menus that are accessible to screen readers?

How do we do it?

Thanks

This e-mail originates from the City of Ottawa e-mail system. Any
distribution, use or copying of this e-mail or the information it
contains by other than the intended recipient(s) is unauthorized.
If you are not the intended recipient, please notify me at the
telephone number shown above or by return e-mail and delete
this communication and any copy immediately. Thank you.

Le présent courriel a été expédié par le système de courriels de
la Ville d'Ottawa. Toute distribution, utilisation ou
reproduction du courriel ou des renseignements qui s'y trouvent
par une personne autre que son destinataire prévu est interdite.
Si vous avez reçu le message par erreur, veuillez m'en aviser par
téléphone (au numéro précité) ou par courriel, puis supprimer
sans délai la version originale de la communication ainsi que
toutes ses copies. Je vous remercie de votre collaboration.

From: Patrick H. Lauke
Date: Fri, Jun 21 2013 1:20PM
Subject: Re: building accessible javascript accordions?
← Previous message | Next message →

On 21/06/2013 19:23, Trafford, Logan wrote:
> Yes, using pure css and no javascript

I'd say it's quite difficult, if not impossible, to have a proper
accordion without any scripting that will also work for keyboard users
(in the same way that it's practically impossible to create a robust -
i.e. not dependent on length of items - dropdown menu with pure CSS that
works for keyboard users as well).

Anyway, 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/

P
--
Patrick H. Lauke

From: Ravindra Kumar Jain
Date: Sat, Jun 22 2013 12:48AM
Subject: Re: Re; building accessible javascript accordions?
← Previous message | No next message

Hi Gabriel,

It is very much possible to have an accessible javascript accordions.
Their are various online libraries , you can search for it .
here is a link for one of them
http://www.accessiblemootoolsdemo.iao.fraunhofer.de/Mootools_Widgets/index.html

In fact , I used it in my site as well .

http://www.projectrics.org/index.php/template/widget

Hope you find it useful.

Regards

Ravindra Kumar Jain

Accessibility Enginteer
Onya Digital Solutions Pvt. Ltd.
Bangalore (India)
= EMAIL ADDRESS REMOVED =