Describing values that shift across states like Loader’s aria-busy.Documenting guidance for elements used in concert, such as a checkbox and it’s label via IDs, field groups, and related microcopy and error text.Demoing composition using page samples, such as for forms data entry.As it flows from one element to the next, they’ll quickly get how hard this is to do well and how much can go wrong.” Adam Rowe, Morningstar Design System “Need someone to appreciate how hard this is? Challenge them to experience their work through a screenreader. This includes using appropriate HTML tags, ordering fields, and aligning content that’s read by a screenreader with clarity. Compose Components Together AccessiblyĪdopting teams must also compose interfaces made of many system parts - inputs, labels, groups, images, and more - in an accessible manner. Customize components from scratch accessibly, using a system’s documented foundation.Compose multiple components together accessibly.Configure individual system components for accessibility.Each adopting team still has work to do to: However, the higher up the ladder of leadership and management you go, they’ll read this and falsely perceive that with accessibility baked in to a foundation, accessibility is achieved. “The Lightning Design System provides accessible markup which will serve as a foundation for your application development.” Salesforce Lightning positions their toolkit as an accessible basis for another team’s development: They document how-tos, tips, and rules per component.Īs a result, design system programs position their kit as an enabler providing accessible components for adopting squads.

They consider accessibility in each design choice: sufficient text and background color contrast, myriad aria properties, scriptable props to shift states in a manner consistent with WCAG guidelines. In serving a collective, people making systems can hold strong beliefs about community and inclusivity, which corresponds to passion for accessibility. System Adopters Make an Experience Accessible. Beyond the accessibility-ready parts provided, there’s more work to do? If so, what? And who’s supposed to do it? If accessible experiences are the goal, the role of a design system and the limits of what it provides remain unclear.

How’s this possible? Inclusivity is a part of our identity!” “So, we aren’t accessible? I hear we can’t say that, even though everyone adopted the system. Half a decade into their design system journey, leaders of a similar organization were confounded as accessibility across their portfolio remained incomplete. However, touting system accessibility can grossly distort expectations. Together, leadership connected good business with doing the right thing. Others heralded that the system would cut costs (by solving challenges shared by many) and mitigate risk (by reducing litigation occurrence and/or scale). Some embraced accessibility in the design system’s role to optimize quality and promote inclusivity as a core value. “Oh, our teams will make accessible products if they use the system? Sold!”

The pitch’s mood shifted when accessibility came up: In late 2016, I helped pitch a design system all the way up to executives that included the CEO, COO, CPO, Head of Design, and other peers.

Accessible systems