Accessibility issue with accordion style elements

[kevincrafts]

From Kevin Darcy in the Accessibility office:

When I navigate through the menu of collapsible/expandable boxes, using the down arrow, the title of the collapsed box is not included with the link for its collapsible box. For instance, I press the down arrow once, I hear “same page link collapsed”. Then, I press the down arrow again, and that’s when I hear “attachments”, but that description is not accompanied by a link. However, both the unlabeled link and the title of that link expand the box when I click it. When I reverse navigate, no action happens when I press the up arrow once. When I press it again, it announces the collapsible box with the title of the information contained within. This kind of issue is quite common in my experience testing. But, I don’t know if it’s actually an issue or a strange quirk. Paula would know how to think about this. The collapsible/expandable boxes are easily navigated. Clicking on any of them does not create any issues, like getting locked into an edit field or other common issues.

[kevincrafts]

The test was done with this page, so the elements in question here are the expand shortcodes.

[jwfuller]

@kevincrafts Is this a bug or a quirk?

[kevincrafts]

I had followed instructions on how to do expandable content with appropriate aria controls, so maybe it's a quirk? We can see if there are better methods available now than when this was done 2-3 years ago.

[jwfuller]

@kevincrafts Is waiting on more information from DAO

[kevincrafts]

I need to reconnect with Laura Hamrick on this for more information from their end.

[kevincrafts]

From Laura Hamrick:

We’ve encountered 3 different accordions on WE sites with varying levels of accessibility.

The one I believe Kevin Darcy sent feedback on was for the accordion shortcode (example). This one I think only encounters issues with JAWS, and they are relatively minor. There may be an issue related to the “+” graphic at the start of the link text – I will defer to Mike on this one since it’s a more subtle issue.

There is another accordion type in the WE FAQ template (example) – I think Mike indicated that this was the most problematic of all 3 accordion types. The clickable question doesn’t indicate to the screen reader user that it is expandable or actionable. It also forces JAWS into “forms mode”, which Mike can expand on if you have questions about what causes that or why it’s an issue.

There’s another example on the Buff Pass FAQ page that uses a unique accordion template. This one has an issue where it moves JAWS into forms mode and then I believe the screen reader is unable to read the expanded content.

I think of the 3, the shortcode version is the most usable, and #2 is probably what we would prioritize. Again, will defer to Mike for further analysis and support.