Challenge
In 2015, the CHHS team started a web development project with the university’s internal team. Two years later, the project had failed to launch. One of the main reasons for the failure was the project fell very short of meeting requirements to pass WCAG AA standards.
To help CHHS start over with a compliant site, I built a Pattern Lab pattern library that prioritized accessibility and contrast testing. Transparency was key to a successful project — our team communicated and shared often with the CHHS team, and consulted with WebAIM throughout the process to vet our work.
Collaboration and Transparency
Although NewCity generally has an open process with all clients, transparency was critical for CHHS since lack of communication contributed to the failure of their first project. One of the ways I maintained transparency was by involving the client in my library planning process.
Whenever I build a pattern library, I use a tool like Trello or Pivotal Tracker to plan the library and track what work needs to be done. This is usually an internal tool that I share with my agency team members.
For CHHS, I shared the board with the client team and invited them to give feedback on the patterns. This was scary at first! It felt invasive, like having the client inside my brain. But by being involved in that process, the client team was able to better understand their system and make decisions about it. It gave the collective project teams a shared vocabulary to communicate about the patterns that made up the site, as it was being built.
Automatically Accessible
Art director Sara Andrew defined several color-scheme options for the site. The objective was to establish predefined schemes that the content authors could use, preventing any accidental contrast errors.
Sara created vibrant, accessible combinations using CHHS’s distinct brand palette. I set up a scheming system within Pattern Lab to ensure each background color option supported accessible child elements. Every combination had to work!
A scheme can be set on a container by adding a class:
.content–row.scheme––aggie–orange
Then every child within .content–row automatically has the color settings that are accessible on the “Aggie Orange” color. This approach made building visually rich, accessible pages a one-click no-brainer for content editors.
For the record, there are not many colors that are accessible on bright orange 🙂
Working with Color Schemes
I’ve been chasing an elegant solution for multi-scheme color settings for a while. It’s a tough, fun problem and I’m always trying to improve my solutions to it.
The CHHS schemes are kept together in a single settings file — not with the patterns they affect. In a large library, it becomes a very large file. It’s not a great experience for the developer who has to edit it.
Since working on the CHHS project, I’ve found better ways to crack the scheme problem and am working on a blog article to share those solutions.
A Message from the Future: Case Study Update
In the time since writing this case study, the design system community has gotten a lot better at handling this scenario. Design tokens would be the appropriate way to approach this (for now in 2022, at least).
Testing and Reviewing
I used a lot of testing methods to ensure CHHS’s library was accessible. Each pattern got a manual test in the WAVE tool, plus a round of automated testing. Page templates were automatically tested in the development pipeline with Pa11y CI.
In addition to our testing, the site was also reviewed by WebAIM. They reviewed our wireframes, designs, and front end templates for compliance. It was a positive, educational experience that gave me insight into how accessibility standards are set and how they are evaluated.
Sharing What We Learned
We were lucky to have the CHHS team as a client; they were sharp and technically savvy partners. We all learned a lot from each other during the process.
At the 2019 EduWeb conference, CHHS team members Jen Garvey and Dave Carpenter gave a presentation about the failed internal site and the successful launch with NewCity. I joined the presentation to discuss why atomic design lends itself to accessible sites.
