I've been working on adding ARIA to my YUI Accordion widget for better accessibility. Since documentation is still a bit hard to find and what's there can be a bit ambiguous at times I figured I'd write down what I've done so far and ask you all to comment on it in case you think anything can be improved. Here goes:

Roles

I felt that there should really be roles for an Accordion View but... there aren't! Therefore I had to pick the closest match. I decided to go for the following roles.

• The UL element that represents the entire accordion gets role="tablist"

  My reasoning behind it is that in my opinion an Accordion is closest to a tablist. Definitely closer than menu which I had at first.

• The bars that open a pane have role="tab". This corresponds with the role of the parent element and again, it kinda makes sense I think.

• Finally, the panel revealed by each accordion subcomponent has role="tabpanel". Again, in sync with the previous two roles.

I think it would be better if there were roles for Accordions because they occur very frequently. This is however the best I could come up with for now.

States

I used a handful of ARIA states. Again, a bit of personal judgement is involved as there don't seem to be any strict rules.

• For the bars that open a tab panel I've been considering aria-selected and aria-pressed. The latter seemed closest to something that has a kind of a toggle behaviour which is why I went with aria-pressed.

• For the 'tabs' I used the state aria-hidden which indicates state change for any panel.

Finally I created a relationship between each panel and the bar that toggles it by using aria-labelledby="id_of_the_bar"

All this is currently implemented in my development version of the Accordion which can be seen here at the moment of writing. Fairly soon (I hope) it will replace the current version so if you bump into this post later and don't find it under the first link, the last one should work.

Please do comment!