Activity Spotlight

Component Libraries: The Foundation of Accessibility at Scale

Design systems and component libraries are key to the scalability and consistency of front-end applications built by large organizations. If the component library isn’t accessible, how do we expect developers to build accessible apps with it? Realistically, we can’t. We’ll start by briefly covering the fundamentals of component libraries and what it means to build one to be accessible by default. I will dig into the code of one of my favorite component libraries to illustrate strategies that implement accessibility by default. Then we'll cover testing approaches to maintain the accessibility quality of a component library as it continues to grow and evolve. Building a component library that is accessible by default can’t entirely prevent developers from mistakenly using components in an inaccessible way, however. I’ll demo how the free axe Accessibility Linter VSCode extension can prevent us from using a component incorrectly in real time as we code.