A design system is a central resource collection of reusable components that streamline digital product development, ensuring consistency and efficiency. An accessible design system includes accessibility documentation, guidelines, and implementation notes.
Benefits of an Accessible Design System
If the components are built with accessibility in mind and are reusable, accessibility will be embedded from the start. Reusable components also make design and development efficient and consistent. For example, complex UI components like accordions can be built once, built for accessibility, and then reused throughout the website with ease and assurance that they meet applicable WCAG standards.
What’s Included in an Accessible Design System?
An accessible design system includes style guides, a component library, and a patterns library, each with appropriate accessibility documentation.
Accessibility Documentation
Well-developed design system accessibility documentation includes an overview of the WCAG accessibility guidelines and their application to your organization's design and development processes, your organization's accessibility compliance level, and a list of accessibility resources. This documentation should also include any current accessibility limitations, where those limitations exist, steps being taken to remediate them, and an estimated timeline for completion.
Specific accessibility documentation should accompany every style guide, component, or pattern. For example, in a visual style guide section about color, accessibility documentation regarding proper color contrast should be included.
Style Guides
A style guide is documentation that provides context and instructions for a design system’s patterns and components. Many design systems have two style guides, one for visual guidance and the other for editorial.
The visual style guide would include things like:
- Typography - accessible fonts and font sizes for titles, headers, etc.
- Colors - proper colors and color contrast for fonts and backgrounds, components, focus and focus states, etc.
- Icons - shapes and proper colors, along with appropriate text labels.
Editorial style guides would include:
- Error messaging
- Input labels
- Inclusive voice and tone
- Instructions for forms, logins, etc.
- ALT text for images
Component Library
A component library contains predetermined, prebuilt for accessibility, reusable UI elements such as drop-down menus, date pickers, toggle switches, buttons, etc. The library serves as a "grab-n-go" resource for designers and developers.
Every element in a component library should be tested for accessibility and documented as passing the appropriate WCAG guideline before it is added to the library. Each component should have accompanying documentation on structure, focus order, keyboard accessibility expectations, and the content that should be announced by a screen reader when it encounters a component.
Pattern Library
A pattern library contains combinations of components that maintain accessibility. For example, a page template combines components such as menus, buttons, headers, etc.
At a minimum, the accessibility documentation for a pattern library should include a list of interactive elements that should not be nested within the webpage. Some interactive elements, such as buttons, checkboxes, and sliders, can not have interactive child elements because screen readers may ignore or "misinterpret" their function.
By investing in a robust, accessible design system, you're not just checking a box; you're fostering a culture of accessibility across teams and ensuring accessibility is a proactive part of your website development. This saves time and resources and guarantees a truly inclusive experience for all users, regardless of their abilities.
Pro Tip: If you don't have a design team to collaborate and build your own design system, consider adopting or adapting an existing accessible design system. Here are a few design systems you may want to consider:
- Material Design, by Google
- Atlassian Design System UI, by Atlassian
- Inclusive Components by Heydon Pickering
Resources
- Design Systems 101
- Accessible design systems
- What is a design system?
- Patterns in Design Systems
- Accessibility - Foundations - Atlassian Design System
- How To Create Accessible Design System Components
- Auditing Design Systems for Accessibility (YouTube)
- Inclusive Design Patterns - Vitaly Friedman, webinar notes
