Fresh from a failed redesign project, Colorado State University’s College of Health and Human Sciences (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

  • 2018
  • Fort Collins, CO
  • NewCity
  • Development

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.

Patterns Trello board I shared with the CHHS team.

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

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

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 joined the presentation to discuss why atomic design lends itself to accessible sites.

Deliverables & Technologies

My contributions to the project's deliverables were:

Technologies used:

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

  • Twig, SCSS, and 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
  • Front End Developer: Jenny Slaughter
  • Back End Developer: Jesse Janowiak
  • Content Strategy: Rachel DeLauder
  • Analytics: Matt Gaskey
  • Project Manager: Erin Simmons
The Colorado State University College of Health and Human Sciences pattern library was built starting from NewCity’s foundational Pattern Lab starter kit, Monolith, which was largely developed by Andy Hebrank and John Williams.

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

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