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 and a role of tabpanel to each content pane.

Although these might seem like semantically correct roles to use, they have negative consequences for screen reader users on Windows. virtual cursor navigation in the screen reader is disabled when a tab is clicked / focused, and they prevent the screen reader from recognizing the header elements. An element can only have one role, so those assigned explicitly via role attribute replace any implicit role the element may initially possess, and thus losing any semantics implied by that role.

Headings are particularly important since they provide a quick way of scanning the page for relevant content. The user can immediately discern the existance of each section of the accordion via scanning the headings, and know whether it is opened or closed and that it is in fact collapsable.

tabindex, aria-controls, and aria-selected

The tabindex attribute is added to the trigger elements so they can receive keyboard focus, however this may not always work in all browser/screen reader combinations. We choose to use natively focusable items as triggers, so we remove the tabindex. The aria-selected and aria-controls are not needed. They do not provide any discernable bennefit to screen reader users, and in at least one screen reader, aria-controls causes lots of unwanted chatter.

First Section

Second Section

Third Section