At a glance

<$50K
2021 - 2022
Completed
CivicTheme, GovCMS, Drupal
Discovery & strategy, Design & user research, Build & migration
GovTech, Whole of government, Open design, Open source, Web development, Content management systems
User needs, Multidisciplinary teams, Agile delivery, Tools & systems, Design, Open standards & common platforms, Open source, Testing

Overview

CivicTheme’s challenge

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.

CivicTheme’s transformation

Salsa is currently performing a full accessibility audit on CivicTheme to meet our original vision of an accessibility-first design system.

The outcomes

  • 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:

  1. Update the Figma file so it reflects the final components that were developed

  2. 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 ( ANDIExternal Link ) 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 VoiceOverExternal Link , 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.

Lessons learned

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)

About CivicTheme

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.