On this page:
At a glance
Many CivicTheme components were developed in parallel to a website build that used CivicTheme. This meant that while components had passed accessibility requirements in the design phase, they had changed and no longer met WCAG.
Salsa is currently performing a full accessibility audit on CivicTheme to meet our original vision of an accessibility-first design system.
An open-sourced accessibility spreadsheet for CivicTheme that shows colour contrast for every component
Updated accessibility statements of compliance across all applicable components
An accessible, government-grade design system
Full case study
CivicTheme’s challenge — creating a new, accessible design system
When Salsa was creating CivicTheme, we started with designs in Figma, focusing on creating all the different components government websites need. From there, we started building the CivicTheme components in code. During CivicTheme’s journey to alpha, we worked with key clients, building our CivicTheme component library as they were needed for specific projects. However, this meant that during our focus on getting the development done for project work (with deadlines), the finished components were often slightly different to the Figma files.
We identified the need for a full accessibility review looking at the final components that had been developed.
Our goal: To make sure that all CivicTheme components are accessible to people with disabilities, including auditory, visual, cognitive and manual dexterity disabilities.
CivicTheme’s transformation — a clear understanding of CivicTheme’s accessibility
We’re currently doing a full accessibility assessment of CivicTheme across WCAG2.1AA, starting from scratch on all components to ensure a thorough review. We’ll be specifically reviewing colour contrast and interactivity. We’ll then write Jira tickets for all issues, outlining the acceptance criteria and solution direction around accessibility. This will form a backlog of work that will be completed as the components are updated.
We’re executing this work in two stages:
Update the Figma file so it reflects the final components that were developed
Conduct an accessibility review of the final components in Figma, focusing on WCAG 2.1 AA
During our Figma testing, we use The Paciello Group’s Colour Contrast Analyser to test colour contrast. From there, we test in Storybook and Drupal using a combination of the Accessible Name & Description Inspector ( ) tool, which is an open source tool created by the Accessible Solutions Branch of the Social Security Administration in the United States, and Accessibility Insights. Accessibility Insights (supported and maintained by Microsoft) is a tool that helps developers find and fix accessibility issues through an automated and guided manual process. While this additional testing does not guarantee that we’ll find all issues, we find many more issues than automated tests alone. We also perform manual testing via keyboard, via visual inspection and via , Apple’s screen reader.
We’ve also created a Figma plugin that automates some processes. It pulls all the components out from the Figma file, creates a spreadsheet, and shows the colour contrast. It then automatically checks if it passes or fails the colour contrast requirements — WCAG 2.0AA for text contrast and WCAG 2.1AA for non-text.
Although CivicTheme was being designed with accessibility front-of-mind, because it was being developed in parallel to a website build project, changes were being made to the components during development. This meant that our Figma file (designs that had passed an accessibility review) and the actual components were out of sync. In an ideal world, we would have been able to focus more on fulfilling accessbiliy inputs into the tickets, so that even though the components were changing they were still meeting WCAG.
The outcomes — an accessibility-first design system
During this next phase of the CivicTheme project, our accessibility focus will deliver:
An accessible, government-grade design system
An open-sourced accessibility spreadsheet for CivicTheme that shows colour contrast for every component so clients and other digital agencies that want to use CivicTheme can see what’s accessible and what's not
Updated accessibility statements of compliance across all applicable components (Note: not all components need to be accessible, e.g. elevation (which produces shadows under visual elements) does not need to be accessible)
CivicTheme is a design system with a Drupal 9 theme and a component library. CivicTheme was created for government agencies to build Drupal 9 websites faster and at a lower cost. It’s open source, which means accelerated innovation and no license fees (reducing website build and ongoing costs). While Salsa maintains the open source project, any government agency can use the solution at any time for their own Drupal 9 website.