Update accordion guidance

[christopherthomasdesign]

What

Update accordion guidance, in response to the working group feedback and so it’s consistent with changes to the component.

Draft document of guidance changes

Why

Some of the content refers directly to the older design, such as plus/minus icons. This must be changed before releasing.

The working group also raised a few points that could be made clearer.

Who needs to know about this

Content designer

Done when

• Write draft of updated guidance
• Get feedback from team (2i???)
• Add examples to page
• Publish when we release the new component

[christopherthomasdesign]

From going through the working group feedback alongside the existing component, I found 4 main areas we could address.

1. Update ‘research on this component’ section

The new changes to the component will make a lot of the content in this section out-of-date:

• the ‘Known issues and gaps’ should all have been addressed
• the ‘Next steps’ section, which concerns the use of plus/minus icons, will no longer be relevant
• we may want to add some more specific research questions if we’re not able to do any more user research before publishing

2. Clarify that teams should only use accordions as a last resort

The working group noted that teams should only use an accordion as a last resort. They should prioritise organising content into navigable and readable chunks and avoid hiding content.

We do already have content to this effect, but maybe it could be more direct. Perhaps add something to the start of ‘when to use this component’ to make it clear that accordions should not be a replacement for clear, well-organised, concise content.

3. Explain how the accordion remembers open/closed state

Make sure our guidance explains that the component remembers the state of open/closed sections when user returns to the page, and that you can force sections to stay open (but you can't currently force them to stay closed). (Check this is deffo true with the GOV.UK team)

There’s something in there at the moment that we could revisit: “Users might need the sections they have opened to stay open if they leave and then return to the page. You can configure the accordion component to stay open.”

4. Explain how to fit an accordion into the page structure

Explain that you can change the heading level for the section headings and why you might wish to do this. The headings in accordions use h2 by default, but you might need to change that to h3 if you want the accordion to sit underneath a h2 etc.

5. Tell users not to use really long explainer text under the accordion headings

Probably following a similar pattern to how we say not to use long hint text. It's a similar issue – screen readers will read out the full heading and explainer text when describing the button. So keep it snappy!

[hannalaakso]

We also had some conversation about the above point 2 here: alphagov/govuk-frontend@8a1e48e#r672636085

[frankieroberto]

@hannalaakso @christopherthomasdesign in terms of usage, one thing it might be worth clarifying is whether the accordion should/could be used for sections of prose content, or for navigation (ie lists of links), or both (or neither! 😉)

I've quite often seen it used for navigation, including on GOV.UK – and I suspect this is a better use-case than sections of prose content, which could be better structured as plain headings, possibly with a table of contents, or as separate pages.

Where it’s used for navigation, I slightly worry that the new design hinders usability a bit by making it harder to scan the section headings (as each one is now a lot taller).

Here are some examples where it’s currently used for navigation:

• https://explore-education-statistics.service.gov.uk/find-statistics
• https://www.ethnicity-facts-figures.service.gov.uk/education-skills-and-training
• https://www.gov.uk/coronavirus
• https://www.gov.uk/world/france

[christopherthomasdesign]

Another thing we should probably be clear about: don't use really long explainer text under the accordion headings. Probably following a similar pattern to how we say not to use long hint text. It's a similar issue – screen readers will read out the full heading and explainer text when describing the button. So keep it snappy!

[EoinShaughnessy]

@calvin-lau-sig7 @hannalaakso Does the accordion guidance's use-clear-labels section need to mention the restriction on non-phrasing content, as explained in #2310?

[lrdj]

The accordion is being used by dev teams as it gives the illusion of being able to approach a gov.uk service like a "single-page-app". We know this is wrong but it's a hard sell telling them to stop building this way.

Also, to be clear, I'm in the process of fixing this, so please don't jump down my service owner's throat!

Attaching two files, the first shows part of the service. Note the appearance of "task list"; "accordion"; and "details" all on the same page.

The second shows the "accordion" pattern with three levels of nesting.

[calvin-lau-sig7]

Early draft of guidance changes shared for team input.

[hannalaakso]

@calvin-lau-sig7 I've added a write up here about the findings and next steps from the accessibility clinic, including the content changes as discussed: alphagov/govuk-frontend#2295 (comment)