Accessibility as a first-class citizen in your design system

Great design isn’t just about aesthetics or functionality — it’s about inclusivity. Yet too often, accessibility is treated as an afterthought; something addressed hurriedly at the end of a project or feature. But what if it wasn’t — what if accessibility wasn’t the final piece of the puzzle, but the framework holding everything together?

When accessibility is built into your design system from the outset, it transforms how teams work and how users experience your products. Accessible design systems empower teams to create consistent, inclusive experiences at scale, ensuring no one is left behind.

Why accessibility is central to your design system

Accessibility isn’t just a “nice-to-have”. It’s a moral obligation, a strategic advantage, and — in many regions — a legal requirement. But more than that, it’s an opportunity to create better, more resilient products. A design system that prioritises accessibility sets the foundation for:

• Consistency: Accessible foundations and components ensure a unified experience across your digital products by maintaining design patterns that function reliably across different use cases. For example, standardised error messaging, navigation menus, and focus states allow users to predict interactions across the system, fostering trust and usability.
• Scalability: Teams can reuse and adapt pre-tested components and patterns without having to revisit accessibility requirements repeatedly. This scalability not only saves time, but ensures that accessibility is baked into the system at every level, from the smallest button to the most complex multi-step workflows.
• Efficiency: Embedding accessibility into your design system reduces duplication of effort and last-minute fixes. By addressing accessibility at the design token, component, and pattern levels, teams can focus their energy on innovation rather than remediation.

By prioritising accessibility, you’re not just improving usability; you’re future-proofing your products and ensuring they’re welcoming to everyone.

The building blocks of an accessible design system

If you want to elevate accessibility from a checklist to a core principle, your design system needs to address key areas that influence every stage of the user experience. By weaving accessibility into these critical building blocks, you can create a system that scales effortlessly and inclusively:

Foundational design tokens

Design tokens — such as colour, spacing, typography, and motion — lay the groundwork for an accessible design system. By standardising these elements with accessibility in mind, you ensure a strong, consistent foundation for all components. Key considerations include:

• Colour contrast: Ensure all text and interactive elements meet WCAG contrast ratios.
• Typography: Use scalable fonts and maintain adequate line height and letter spacing for readability.
• Spacing: Provide sufficient spacing between elements to avoid accidental clicks or taps.
• Motion and animation: Avoid motion that could trigger vestibular disorders and provide options to disable animations.

Accessible components

Components are the heart of any design system. By building accessibility into the DNA of your buttons, form fields, modals, and other elements, you ensure every product using your system inherits these inclusive practices. Key considerations include:

• Keyboard navigation: Ensure all interactive elements are operable with a keyboard.
• Screen reader support: Use semantic HTML and ARIA attributes to provide meaningful context.
• Interactive states: Clearly define focus, hover, and active states for all interactive elements.

Accessible patterns

Patterns provide reusable solutions to common design challenges, and ensuring these patterns are accessible is critical. Accessible patterns standardise user experiences while addressing specific needs. Examples include:

• Forms: Design forms with clear labels, error messaging, logical tab order, and validation that communicates effectively with assistive technologies.
• Navigation: Create menus, breadcrumbs, and tabs that are operable via keyboard, screen reader-friendly, and adaptable to different screen sizes.
• Modals and Dialogs: Ensure modals are focus-trapped, dismissible with the keyboard, and do not block users from completing their tasks.
• Feedback and Notifications: Provide accessible alerts and feedback messages using live regions or ARIA roles to ensure users are informed without overwhelming them.

By investing in patterns, you not only increase efficiency but also ensure accessibility considerations scale across entire workflows, from onboarding experiences to complex dashboards.

Clear documentation

Accessible components and patterns are only useful if teams know how to use them effectively. Comprehensive documentation should include:

• Guidelines for accessible implementation.
• Examples of components and patterns in various states (e.g., focus, hover, disabled).
• Common pitfalls and how to avoid them.

Testing and validation

Accessibility testing should be a continuous process. Integrate tools like Accessibility Insights and axe DevTools into your workflow to identify and fix issues early. Additionally, include real users with disabilities in your testing phases to uncover gaps automated tools might miss.

Collaboration across teams

Accessibility isn’t the responsibility of one person or team; it’s a collective effort that requires collaboration across disciplines to ensure inclusivity is built into every stage of the process. Each team member brings a unique perspective and set of skills to the table:

• Designers: Accessibility should influence decisions from the earliest stages, such as wireframing and prototyping. This includes considering colour contrast, readable typography, and logical navigation flows to ensure designs are intuitive and inclusive.
• Developers: Developers must ensure that code implementation aligns with accessibility standards. This involves using semantic HTML, managing ARIA roles effectively, and where possible, testing components with assistive technologies to catch potential barriers before deployment.
• Content designers: Clear and descriptive text is crucial for accessibility. This includes crafting meaningful alt text for images, ensuring link text is contextually relevant, and avoiding jargon that could confuse or alienate users.

Lessons from industry leaders

Atlassian: Accessibility embedded at the core

Atlassian’s design system stands out because accessibility is woven into every component they build. Their team leverages tools like Storybook to document accessible states and ensure consistency across their design system. Beyond the technical, they focus on education — empowering designers and developers to make choices that are inherently inclusive.

💡 Document accessibility at every level. Highlight considerations for keyboard navigation, screen reader support, and visual contrast within your component library.

Shopify: Accessibility as a team effort

Shopify’s Polaris design system exemplifies collaboration. Accessibility isn’t just the domain of designers; it’s a shared responsibility involving developers, content strategists, and QA teams. Polaris provides robust guidelines on keyboard navigation, colour contrast, and even voice interfaces.

💡 Make accessibility a team sport. Host cross-disciplinary workshops and accessibility sprints to foster a culture of inclusivity.

Microsoft: Testing early, testing often

Microsoft’s Fluent UI champions early and frequent testing for accessibility. Their use of tools like Accessibility Insights allows teams to identify potential issues during the design phase, long before they become bottlenecks. It’s a proactive approach that saves time and creates better products.

💡 Don’t wait until the end to test accessibility. Incorporate it into your design process from day one.

How to get started

Start with standards

Familiarise yourself with the Web Content Accessibility Guidelines (WCAG). These principles — perceivable, operable, understandable, and robust — should inform every component in your system.

Leverage tools and frameworks

Using the right tools is essential for integrating accessibility into your workflow. Each tool has unique strengths that help address specific stages of the design and development process:

Use tools that integrate accessibility into your workflow:

• Storybook: This tool allows you to document and test UI components in isolation, ensuring that accessibility is considered for every state and variation of a component. With add-ons like the accessibility plugin, you can run checks directly within the Storybook environment to identify issues early.
• axe DevTools: Automate accessibility checks directly in your browser to quickly identify violations of accessibility standards. Its integration with developer tools makes debugging efficient and actionable.
• Inclusive Design Toolkit: This comprehensive resource from Microsoft helps embed inclusivity into your process with practical frameworks, checklists, and examples that guide teams toward designing for all users.

Build accessibility reviews into your process

Make accessibility part of your regular design and code reviews. Create checklists and guidelines to keep teams aligned.

Educate and advocate

Invest in training for your team. Host workshops, share success stories, and celebrate wins to reinforce the importance of accessibility. Some notable resources include:

• Anna Cook’s Auditing Design Systems for Accessibility course
• Practical Accessibility from Sara Soueidan (I haven’t taken this one, but have heard great things!)
• Accessibility Guidelines from the team at W3C

Transforming your design system with accessibility

When accessibility becomes a cornerstone of your design system, it changes how your organisation thinks about inclusion. You create products that aren’t just functional, but transformative — welcoming all users, no matter their needs or contexts.

Accessibility isn’t just a feature. It’s a mindset. And when it’s built into the fabric of your design system, you’re not just designing better products; you’re building a better, more inclusive web for everyone.

This article originally appeared on Substack, where I share more of my thoughts and insights — no paywalls, no hassle. If you enjoyed this piece, feel free to subscribe there for exclusive content.

If you’re liking my writing here on Medium, consider following me to stay updated with new posts. You can also find me on X for quick takes or on LinkedIn for deeper conversations about design and digital products.