Featured work
Accessibility checklist

Team
  • Camille Esposito
  • Corey Moen (site design)
  • Johnnie Gómez Alzaga
  • Sara Lundberg
  • Ruben Niculcea
Roles
  • Project lead
  • Project management
Problem

Webflow’s brand design web team designs and builds all of our marketing landing pages. Initially, we focused on designing landing pages that showcased the design capabilities of Webflow. But then teammates started giving us feedback that our designs could cause harm to some people, and prevent others from engaging with them at all. In short, they weren’t very accessible, which is something we didn’t know much about at the time.

Solution

We created our own accessibility checklist: written in plain English, unlike a lot of existing accessibility documentation, including how to implement guidelines in Webflow. It started as an internal effort to help guide our own design and development process. When we learned how pervasive inaccessible web design was, we then shared it with the community for Global Accessibility Awareness Day.

Go to the live accessibility checklistScreenshot of our guideline for reflow, which reads "People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling."
Our checklist includes categories like animation, appearance, code, images and media.
Screenshot of our guideline for reflow, which reads "People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling."
We worked with our UX writer to write our guidelines in plain English, aiming to make them easy to understand even for a not-super-technical audience.
Screenshot from the WCAG guideline for reflow, whose first sentence reads "User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport)."
WCAG guides are helpful, but feel like they're written for a very technical audience.
Screenshot of a guideline showing where in the Webflow Style Panel to add an aria label in order to make elements remain visible visually but hidden from screen readers.
We also included Webflow-specific implementation, like in this guideline that explains where in the Style Panel to add an aria label.
Screenshot of a guideline that provides a code snippet that makes the skip link work properly.
Where applicable, guidelines also include code snippets you can copy directly from the checklist to use, like this one that makes the skip link function properly. 

The checklist was a big group effort. The core team working on this included myself and 3 web brand designers, and we worked closely with accessibility specialists at Webflow to learn from their expertise. I led the project, which included owning the vision, delegating tasks to designers, keeping us on-track for our launch deadline, managing other work to meet deadlines, and coordinating cross-functional work.

To learn more about this project:

Other work

Webflow blog redesign

I redesigned Webflow's blog to better accommodate and highlight our great content and to make its design more in line with the Webflow brand experience.
go to case study