Accordion

Motovation

Role attribute

When jQuery-ui builds the accordion widgit from the html you provide, it adds a role="tab" to each trigger element. This provides several advantages to screen reader users, but also presents a problem.

On the positive side, It provides the screen reader user with information about the state of the tab by reporting on the state of the aria-expanded attribute. On the negative side of things, it turns off virtual cursor navigation in the screen reader, and prevents the screen reader from recognizing the header elements. In fact, if we add a role attribute to any header element, or any of its descendents, its role as a heading is lost.

It also turns out that aria-expanded is only recognized if the role is one of a very few values: button and tab are the only two roles which cause the screen reader to report the state of the aria-expanded attribute. This, in my opinion, must change; almost any element can be "collapsed" or "expanded", so aria-expanded should have meaning on all elements (or perhaps on all elements which can contain children - aria-expanded on a BR element would make little sense).

My Workaround

As a demonstration, I've done the following:

• initialize the accordion and mark it disabled;
• removed roles from the parent container, all the trigger elements, and the content panels;
• Readjust things so that the aria-expanded attribute is on the button element which is the child of the heading element (the widgit places it on the heading element itself)
• When accordion changes, be sure the aria-expanded attribute stays on the button elements, not on the heading elements

For a slightly different approach using textual indicators, see this accordion demo instead.

First Section

Second Section

Third Section