Accessible Design Considerations for Styles, Components, Patterns, and Pages

The value of a design system is that it provides the standards and infrastructure for digital products. These foundations and their governance ensure the experiences are consistent and the processes are efficient, allowing organizations to build at scale. When the individual pieces of a design system are designed with care and quality, teams are empowered and have confidence that everything just works.

Design systems are not simple machines, but their structure is stable. From styles like colors and fonts, to components like buttons and links, to patterns like cards and filters, to page templates and fully designed pages, the elements build upon each other, from small and simple to large and complex. As a result, at each level, the design requirements vary, as do the decision-making criteria.

To get to that utopian place where everything in the design system just works, well, it all has to be accessible doesn’t it? And because the design requirements vary per level, the accessibility requirements also vary per level. Thus, it is imperative that designers understand what these differences are, and how to design for them.

In this session we’ll discuss the accessible design and documentation considerations for each of the levels in Brad Frost’s design system methodology (link: https://bradfrost.com/blog/post/atomic-web-design/). For styles, we’ll discuss things like tokens. For components, we’ll discuss things like states and interactions. For patterns we’ll discuss things like keyboard navigation and interactivity between elements. And for templates and pages we’ll discuss things like responsiveness and orientation.

In addition to listening to the formal presentation, attendees will have an opportunity to apply what they’ve learned to create some accessible elements. Each participant will work in Figma to create their own set of accessible buttons, links, and checkboxes, which they will then use to create an accessible toolbar and some accessible filters, which they will then use to create an accessible data details page.

Please note: Attendees should have access to the design program Figma. But because design programs like Figma are not well supported from an accessibility standpoint, attendees may also use PowerPoint.