Review the accordion summary line design

[hannalaakso]

What

The accessibility clinic reviewed the new accordion with a summary line (the first clinic didn’t review this variant as it was added later). Following the feedback, we should review the summary line design to see if it’s possible to move the summary out of the button element. The clinic flagged that having so much content inside the button is not something that users would expect. They said they weren’t able to think of examples elsewhere where similarly long content was used inside a button.

It was also mentioned at the clinic that visually it might not be obvious that the whole heading block is interactive. For this reason, users might not expect the button to contain so much content. However, this is something that also exists on the live version.

The original design rationale for having the summary line inside the button was


to better visually illustrate the additional context of accordion heading by placing it directly beneath the heading as opposed to placing it directly beneath the reveal/expand button

If we move the summary line below the “Open” button in the markup, we should reflect this in the visual order of the elements too. However, this might mean that we lose some of the “additional context” mentioned above.

It’s worth noting that the emphasis of the accessibility feedback was to do more testing with users as we don’t know for sure whether this is likely to be a significant issue for users.

Why

Users of assistive technologies might be confused or disoriented by the non-standard use of button element.

The large amount of content inside the button also makes the button outline in FF High Contrast much larger than in the live version, as discussed in Improve accordion presentation in Firefox High Contrast mode. However, the proposed fix on that issue might improve this issue somewhat even if we didn’t remove summary from the button.

The buttons also end up visually containing a large amount of content when viewed without CSS but with JS (which is how assistive technologies perceive them), as discussed in Improve accordion with summary line semantics and presentation when JS loads but CSS doesn't. This is something that already exists on the live version but moving the summary inside the button has possibly made this into something that users could struggle with.

Who needs to know about this

Designer, PM, developer

Done when

• Decide whether we want to iterate the design that includes the summary line
• Take the iterated design to the accessibility clinic for feedback

[hannalaakso]

We have decided not to try and iterate the design in this iteration since the new design has been in use on GOV.UK since earlier this year (although only the Service Manual is using the version with the summary line) so we have sufficient confidence that it works for users. The new version, without the summary line, has also undergone lab user research with users of assistive technologies and no issues were observed.

The new design was agreed by the accessibility team to be an improvement on the existing Design System version as it solves:

• the existing WCAG fail which we need to fix
• the other existing issue listed in the current guidance about users potentially missing the + icon when zooming in

We have explored other markup focused solutions to improve the experience if the summary line is used and have come up with some next steps and actions to take. Full write up here: #2295 (comment)