Last week, I gave some tips related to a “shift left” approach to accessibility testing. Basically, testing earlier in the project lifecycle helps reduce costly fixes later in the process.

One of the tips I mentioned was around designer and developer collaboration. Today, I’d like to zoom in on that topic a little further by offering two high-level questions to start meaningful conversations about accessibility during the design phase.

Question #1: Are there any design elements that may create barriers for users with disabilities?

Identifying potential barriers and discussing solutions is the key to producing accessible web content. These barriers can come in many forms, but here are a few to start the discussion as it relates to design:

  • Insufficient color contrast between text and background
  • Elements that use color alone to convey information
  • Interactive elements (buttons/links) that are not easy to identify
  • Form fields that are not labeled clearly
  • Animations that involve rapid movements, flashes, or sudden transitions

Question #2: Does the design system include examples that follow accessibility best practices?

The design system or style guide is like documentation for the visual design. It provides clear usage instructions for the basic building blocks of the design: color palette, typography, buttons, and form fields. This document can also be used to document accessibility best practices for other designers, developers, and content creators to reference.

Here are some things a design system can provide examples of that help with accessibility:

  • Text and background color combinations within the brand color palette (including tints and shades)
  • Typography styles that detail minimum font size, line height, and letter spacing
  • Hover, focus, and disabled states for each interactive element
  • Forms with validation and error messaging

I’m sure you can think of many other questions that would be useful in this collaboration, but this is just a place to start. Remember, the goal with this effort is collaboration around building accessible web content, not to deliver a ruthless design critique. Please be nice to your colleagues!

Don’t Miss Out

Get practical accessibility tips in your inbox every week.

Matt Litzinger headshot

Matt Litzinger

Matt is a web developer who builds tools that help organizations better engage with customers and improve website accessibility.