Five Accessibility Opportunities for Design Systems

iMac screen at an angle with several design system components showing
Photo by Balázs Kétyi on Unsplash

articles Design Accessibility Design Systems

Design systems are great, really. But, sometimes they aren’t so good with respect to accessibility. If you’re a designer and working on a design system, you can avoid “phoning it in” and make sure teams have thoughtful and appropriate components to build world-class inclusive experiences. Here are five key things designers can think about and design to create more accessible systems that go beyond the usual defaults.

1. Color and contrast

Ensure color alone is not used for meaningful information. Along with that, make color contrast accessibility choices for text and iconography against the different background colors for the system. This is an opportunity to be explicit and establish allowed and disallowed combinations, minimizing guesswork and, ultimately, costly rework.

Suggestions:

  • Document and guide accessible use of color in practice by not using color alone for meaning in components.
  • Design for both light and dark modes being mindful of contrast and use of color.
  • Provide examples and guidance with contrast calculations/values.
  • Showcase known-good design token pairings to improve implementation consistency and efficiency for product teams.

Examples and resources:

2. Focus states

Many designers spend time only on designing hover states for interactive elements while neglecting the opportunity to create well-designed, accessible focus states. By either removing focus outlines (shame on those that still do this!) or accepting the browser defaults, designers miss out on providing a much more usable, accessible, and actionable experience for users.

Suggestions:

  • Never remove :focus indicators (aka outlines) entirely.
  • Design elements with :focus or :focus-visible state indicators that are consistent and visible to all.
  • Avoid relying on the default browser :focus outline styling. It may not perceptible for some, and it likely isn’t aligned with your branding, either.

Examples and resources:

3. Proximity and choreography

Design systems are great for ensuring consistency across multiple screens, products, and sites. Consistent look and feel along with familiar interactions in components and flows help users more easily understand and operate in the digital spaces we create. When proximity and experience choreography are considered as part of design consistency, this is a recipe for success. You’ll meet the usability and accessibility needs of people with low vision and cognitive disabilities, and ensure interfaces are clearer and more successful for everyone.

Suggestions:

  • Design information and interactions with appropriate sequencing (e.g., labels and instructions before inputs).
  • Build components, patterns, and other guidance using proximity (e.g., grouping related content and controls) so that individuals with limited field of vision and/or using magnification/zoom can easily perceive, operate, and understand the interface.

Examples and resources:

4. Motion, blinking, and animation

Motion can help draw attention, but it can also overwhelm or exclude. People with vestibular disorders, migraines, seizures, or attention-related disabilities need motion to be predictable, subtle, limited, and controllable. Design systems should establish clear guidance on how, when, and whether to use animation at all.

Designers must support system-level settings like prefers-reduced-motion and define reduced-motion variants for animated components. In addition, provide visible user controls to pause, stop, or hide animations that start automatically and last more than five seconds, especially anything that loops or repeats.

This aligns with WCAG 2.2.2: Pause, Stop, Hide, which requires that users be able to control content that moves, blinks, or scrolls unless it’s essential to the activity.

Suggestions:

  • Avoid auto-playing or looping animations by default. If used, allow users to stop or hide them.
  • Add accessible “pause” or “reduce motion” controls components and patterns, and provide guidance to product teams on implementation.
  • Define motion design tokens and include both standard and reduced-motion versions of components.
  • Respect user preferences by implementing the prefers-reduced-motion media query.

Examples and resources:

5. Target sizing

Small touch targets lead to big problems. Many users, especially those with motor disabilities or using touch screens, need large, well-spaced controls. Design systems should define minimum target sizes and spacing between tappable elements. This improves usability and accessibility while making the experience smoother for everyone.

Ensure that all buttons, links, checkboxes, and other interactive elements meet or exceed minimum tap target sizes (typically 44x44px or about 9mm square). Labels should also be clickable, and controls shouldn’t require precision to operate.

Suggestions:

  • Set minimum target sizes as part of your token or component specs.
  • Include spacing and padding guidance between interactive elements.
  • Test across devices using a finger, not just a mouse pointer.

Examples and resources:

Ready to kick-start your accessible design system?

Partner with A11y Is, LLC to integrate accessibility thoughtfully into your design system and improve efficiency and sustainability for your product team build efforts.

Reach out to talk today