E-mail List Archives
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.
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
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 =