Take the iterated accordion component to the accessibility clinic

[hannalaakso]

What

Take iterated component to accessibility clinic.

Why

To get expert feedback

Who needs to know about this

• GOV.UK Accessibility team
• Design System developers, designers

Done when

• Book session
• Prepped a discussion plan for the session
• Arranged a notetaker for the session
• Attended the session
• Recorded feedback

Further detail

List of things to discuss here: https://docs.google.com/document/d/1CG0OUT1tzy7q9juK4O0Iv974854hiBK5GMGF9_0ma08/edit#heading=h.8n015y3xrh1t

Previous accessibility clinic findings:
alphagov/govuk-design-system#1706 (comment)

[hannalaakso]

No clinics in August. Have sent an email to accessibility clinic to ask about being put on a waiting list.

[hannalaakso]

We've got a 30 minute session for 26th August 🎉

We'd like to cover

• the Firefox High Contrast mode behaviour
• testing the accordion with Dragon Naturally Speaking
• whether there are any potential issues with having the heading, summary and icon button inside a <button>
• show how the accordion presents when CSS is disabled but JS isn't (this is a real edge case but it would still be good to get an opinion if there's time): Improve accordion with summary line semantics and presentation when JS loads but CSS doesn't  #2327

[vanitabarrett]

We took the new iteration of the accordion component to the accessibility clinic on 26/08/2021.

Generally, comparing the live version to the new iteration, we agreed that visually it is an improvement due to the following:

• removal of the plus/minus icon on the right-hand side which can be easily missed
• the button element no longer looks like a link

However, there are concerns about so much content being included inside the button element now. In that sense, code-wise this new iteration may be worse than the live version. There was the suggestion of doing user research to determine whether this is a small or big problem for users.

Anika showed the new iteration with CSS-disabled, to help demonstrate the issue with long button content and show visually what a screenreader user will hear when navigating the accordion.

“If you showed this to a content designer and said ‘is this good content for a button’, I’m pretty sure they would say it’s not.”

The general feeling seems to be that it’s the summary line which pushes this button content over the edge and into an area of concern. One approach may be to move the summary line out of the button and below the ‘Show/Hide’, but we’re not sure if this will make things more visually confusing. Probably needs a discussion with a designer to test out a few approaches.

Firefox High Contrast mode

In Firefox High Contrast mode, the new iteration of the accordion component displays as large white buttons with heading text, summary line and show/hide - compared to the live version where only the heading text is within a button element and so only that text is highlighted with a white background.

Currently live version

New iteration

There may be an issue with the accordion sections all looking like one big thing. The suggestion here would be to add a more obvious divider (line/border) to help differentiate between each button.

The team showed a potential change where the button is limited to the width of the content rather than being full width, so it visually looks less like big white blocks. Gut instinct is that this may be a better version, but it may still be an issue that the button contains so much content as this isn’t something you see very often. It may also confuse things further as the click area would still be the whole button even if that wasn’t highlighted as white in high contrast mode.

Testing with Dragon

Anika tested the new iteration (with and without summary line) with Dragon in Chrome. Everything worked as expected. We tested:

• ‘click show’ and ‘click hide’
• ‘click show all sections’ and click hide all sections’
• ‘click [section heading]’
• ‘click [some text inside the summary line]’

Even though the testing went as expected, it’s possible the new iteration may make things take longer for Dragon users. In the live accordion, the button looks like a link, therefore it looks interactive and Dragon users would probably open a section by saying ‘click [section heading]’. However, in the new iteration, the accordion buttons don’t look very interactive other than the Show/Hide, and so it’s likely a Dragon user would need to say ‘click Show’ and then ‘click show [2]’ (for example) to target the section they wanted.

It’s likely that a Dragon user may start to understand the pattern better after interacting with one or two sections, as the focus state hints that the whole area is a button, so the above problem may not be a problem for users who are familiar with the accordion.

The accordion buttons not being obviously interactive shouldn’t be a big problem for screenreader users. Screenreader users who can still visually see the screen may be confused, but should understand once the screenreader provides them with the context that it is a button. But it might not be ideal that we’ve gone from a button that looks like a link (currently live) to a button that doesn’t really look like a button.

Potential actions

• Work with designer to see if it's possible to move the summary line text out of the button
• Tweak accordion in high contrast mode to visually separate accordion buttons/sections a bit more
• User research with screenreader and Dragon users to test if the long button content is an issue
• User research to see if users understand that the accordion buttons are interactive

[hannalaakso]

We had some existing issues to address some of the above actions, I’ve tweaked them slightly to include this latest clinic feedback:

• Improve accordion presentation in Firefox High Contrast mode #2321
• Improve accordion with summary line semantics and presentation when JS loads but CSS doesn't  #2327

Created a new card to potentially iterate the design of the summary line

• Review the accordion summary line design #2336

I'm closing this issue as completed but we'll review the clinic feedback again in our catchup to see if any more cards need to be raised.