WebAIM - Web Accessibility In Mind

E-mail List Archives

A scalable accordion generator using XML

for

From: Bryan Garaventa
Date: Feb 3, 2012 12:45AM

Hi, I thought I'd pass this on in case it's of interest.

Conceptually accordion controls are pretty simple, but as we've all seen they can introduce inadvertent accessibility issues. So I built an accordion generator that uses an external XML file for dynamic scalability.

It doesn't use ARIA, not for the accordion anyway. Instead the script uses metaphor text within the script that can be changed for whatever purpose is desired. This way the screen reader accessible hidden text can be changed to fit any application in any language.

The generator is called using the following syntax:
generateAccordion(ContainerDOMNode, XMLFilePath, (Optional)autoOpen# )
The 3rd parameter can be left blank to generate an accordion where all nodes are closed. The 3rd parameter represents the array index value of the desired node to open automatically, such as 0 for the first node, 1 for the second, etc.

To add items to or modify the contents of the accordion, just modify the XML file. It's that simple.

The styling is left at the bare minimum so that it can be easily modified.

You can see the demo at
http://whatsock.com/modules/accordion_from_xml_module/demo.htm
or download the code files, including the XML file, at
http://whatsock.com/modules/accordion_from_xml_module.zip

Best wishes,
Bryan