A list of results from testing accordions, but with tabbable, clickable container elements with a group role in addition to the expand/collapse button. The semantics are as follows:
<div role="group" tabindex="0" aria-expanded={expandedState} aria-labelledby="citationId titleId">
<a href="#" id="citationId">1</a> <!-- This is conditionally a in-page citation link, depending on authoring -->
<a href="#" id="titleId">Title of accordion</a> <!-- This is conditionally an external link, depending on authoring -->
<button aria-expanded={expandedState} aria-label="show details">+</button>
<!-- If expanded, text is rendered here -->
</div>- Moving by virtual cursor announces grouping/out of grouping when moving with arrow keys (in addition to list info)
- No expanded/collapsed info
- When hitting enter on the group, the cursor jumps to the inner link and instead navigates you to its URL (seems like NVDA is trying to do error correction about focus being on an element with role group, and activating the nearest link instead?). Anyway, fully broken. Hitting space jumped & tried to activate a different random but proximate control on the page for me.
- Reads full grouping name + button name when moving by form field/button (but not by link)
- When tabbing, reads grouping role, accName, and also full inner text, resulting in double announcement
- When shift+tabbing, doesn’t read grouping role, but does re-read all text within the grouping, including inner text if expanded
- JAWS: reads full “group (accName string)” both when entering and exiting the group
- No expanded/collapsed info, silent on change
- Enter/space toggles VPC cursor, not expand/collapse. So you are required to exit VPC cursor to expand (just functionally, b/c you can’t hit enter otherwise), but you won’t be able to read the content without then manually entering it again.
- When hitting enter on the group from navigating with virtual cursor, it actually switches in and immediately back out of VPC, presumably because keyboard focus moves to the group and auto-switches you back to VPC cursor. So you need to hit enter a total of 3 times to expand.
- Reads list semantics without the grouping when entering the list.
- Reads accName + group when tabbing to the group
- no expand/collapsed info at all, silent when expanding
- When moving by virtual cursor, the cursor lands on both the list item and the group + reads the accName for both, resulting in double container + text announcements, followed by reaching that same text directly when moving through it in scan mode.
- expanded state is not announced at all on a group
- When expanding or collapsing while on the group, VO reads the inner button info for some reason, but without moving the cursor
- group semantics announced on both entering and leaving
- VO on iOS fully ignores the group semantics and list semantics, does not even allow swipe access to them
- Does not announce any role or expanded info on the group, just text. Double tapping it expands it, but is silent.
- Because it announces the group name followed by the content, there is a double announcement
- Adding a click event to the group results in adjacent click targets for the title link and citation link, if they exist. These are already relative small click targets, and surrounding links with a bigger container click target is generally regarded as an antipattern even when it doesn't violate WCAG 2.2's target size.
- Not adding a click handler to the group would mean that touch screen readers and voice control can't activate it.