Fresh from a failed redesign project, Colorado State University's College of Health and Human Services (CHHS) came to NewCity needing a WordPress site with a high priority on accessibility. I built a pattern library for CHHS that helped ensure all their patterns were accessible regardless of how they were combined.
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 NewCity 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 in 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.
Art Director Sara Andrew defined several color scheme options for the site. The objective was to establish pre-defined 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:
Then every child within .content-row automatically has the color settings that are accessible on the "Aggie Orange" color. For the record, there are not many colors that are accessible on bright orange.
This approach made building visually rich, accessible pages a one-click no-brainer for content editors.
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 that has to edit it.
Since working on the CHHS project, I've found better ways to crack the scheme problem and put them in this article.
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 frontend 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 also joined the presentation to discuss why Atomic Design lends itself to accessible sites.
Deliverables & Technologies
My contributions to deliverables on the project were:
- An Atomic Design pattern library of website components
- Static frontend templates built from the library's patterns
The pattern library, static templates, and style guide were built using Pattern Lab, and:
- Docker, Gulp, and Gitlab to run the project
The final site was integrated in WordPress (not by me)
UX Architect: Eva Floyd
Art Director: Sara Andrew
Frontend Developer: Jenny Slaughter
Backend Developer: Jesse Janowiak
Content Strategy: Rachel DeLauder
Analytics: Matt Gaskey
Project Manager: Erin Simmons
The CHHS pattern library was built starting from NewCity's foundational Pattern Lab starter kit, Monolith, which was largely developed by John Williams and Andy Hebrank.
Colorado State University College of Health and Human Sciences Team:
Jennifer Garvey, Assistant IT Director for Web and Business Systems
Dave Carpenter, Director of Operations
Gretchen Gerding, Director of Communications
Derek Stegelman, Director of IT for Application Development
Gretchen Potts, Web Content Specialist
Marissa Isgreen, Digital Media Specialist