We recently improved the accordion component as part of ongoing work to make sure GOV.UK is accessible and meets user needs.
An accordion allows users to show and hide content sections on a page. In this blog post, we're talking specifically about how we improved an accordion component. GOV.UK is built on a set of designs, patterns and components; when we update them, changes are deployed across the platform for a consistent user experience.
As well as deploying the improved component to the GOV.UK, we also wanted it to replace the GOV.UK Design System accordion component used by cross-government digital teams to build services.
Meeting accessibility standards
We needed to redesign the accordion to meet the Web Content Accessibility Guidelines (WCAG) which are detailed standards public sector organisations have a legal duty to meet. We needed to meet WCAG 2.1 AA standards which are also known as “success criteria”.
We knew the accordion component did not meet 2 WCAG success criteria:
- WCAG 1.3.1 Information and Relationships - some accordion sections had blue-coloured headings which could be mistaken for links, users might think clicking on them led to another page
- WCAG 3.2.4 Consistent Identification - GOV.UK used 3 accordion styles with slight visual and functionality differences and these inconsistent styles could cause confusion and stop users being able to predict their functionality
As the component will eventually live in the GOV.UK Design System, we additionally had to build it to the Design System’s principles of usability, consistency and versatility and accessibility. But we also wanted to go beyond just meeting the required standards by building the most accessible accordion possible and share our findings by working openly.
Our development approach
To resolve the lack of style consistency, we iterated on an existing award-winning step by step accordion pattern. This helped us align the “open-and-close” element in the updated accordion with the GOV.UK step by step component for a consistent design language.
What we changed
As well as establishing a consistent accordion style across GOV.UK, we:
- updated “Open all” with the more explicit text “Show all sections”; we also moved this button (with text) to the left of the accordion to be easily seen by magnification software users
- redesigned the accordion by removing blue-coloured link styling to distinguish that the controls are not links but a mechanism to reveal/hide sections in the accordion
- replaced the “+” icon with an arrow icon and “Show/Hide” text - this helps voice control enabled users interact more easily with the accordion by saying “click show” or “click hide” (which avoids confusion over how to select this icon by voice) - and we also added hidden text “Show this section” and “Hide this section” to give screen reader users more context when navigating
- created a new arrow icon, or chevron, to clearly indicate that the action of clicking on it can show and hide each section; we also gave it a hover or focus colour to highlight the change of state
Before releasing the new component, we tested it:
- across various browsers
- with different assistive technologies such as Voiceover, JAWS and NVDA
- considering how punctuation improved the experience
- to meet WCAG AA colour contrast guidelines
- by magnifying it with tools such as Zoom 300% (increases the webpage size) and 300% Zoom Text Only (only increases the webpage text)
We tested across various platforms and assistive technologies because they all interpret webpages slightly differently. We also asked accessibility specialists in the Central Digital and Data Office (CDDO) to review the accordion as it would be eventually deployed across GOV.UK.
We found a few problems including that when a user changed the colour settings in the Firefox browser, parts of the accordion weren’t visible. A user might increase or reduce the colour contrast for comfortable reading if they are visually impaired or looking at a webpage in difficult light conditions, for example bright sunlight. We fixed this issue by using
“<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors">forced-colors</a>” and
“<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast">high-contrast</a>” media query.
We also found that when we zoomed into the accordion, the chevron icon did not scale in line with the text. This is because it was originally pixels so we updated it to use relative values or EMs. The update also helped us to meet other WCAG success criteria that relates to resizing text such as WCAG 1.4.4, WCAG 1.4.8 and WCAG 1.4.10.
The updated accordion component is now live across the main GOV.UK publishing platform and a future iteration will shortly be rolled out by the GOV.UK Design System for UK department digital teams to use in service platforms. It meets WCAG and Design System design digital standards and was iterated following accessibility testing.
If you’d like to know more about accessibility on GOV.UK, you can read about our work to meet the accessibility regulations deadline and how data specialists helped make GOV.UK more accessible.