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.

Details

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 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.

chhs trello board
Patterns Trello board I shared with the CHHS team.

For a more detailed look at how I plan and build libraries, see this article on library process.

Automatically Accessible

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:

.content-row.scheme--aggie-orange

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.

CHHS patterns in the scheme tester. Click to embiggen.

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.

Example of scheme looping in scss

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.

pa11y pipeline example
Automated pa11y testing of templates that shows an accessibility error.

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

Technologies used:

The pattern library, static templates, and style guide were built using Pattern Lab, and:

  • Twig, SCSS, javascript to build the templates
  • Docker, Gulp, and Gitlab to run the project

The final site was integrated in WordPress (not by me)

Credits

NewCity team:

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.

Learn more about the project by reading NewCity's CHHS case study.

 

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