A design system fixes accessibility once, if it's the only source
Do accessibility remediation long enough and you arrive at the same conclusion every time. Stop fixing instances. Fix the thing that generates them. The natural end of that logic is the design system. Fix the button component once, and every button in the product inherits the fix. One change, every instance. It's the most leveraged accessibility work you can do. It also rests on an assumption…
An accessibility design system can only truly succeed if it is the sole source for all components. Once you fix a problem at the source, every instance that relies on that component will inherit the fix. However, there may be buttons or other elements that bypass the component, such as hastily written divs with click handlers or one-off code snippets. If these bypassed instances are not caught and updated to match the source component, the fix is incomplete.
After making the fix at the source, the next step is to search the entire codebase for every place where the pattern was reimplemented. Each one must be evaluated to determine whether it should be folded back into the component or if it needs its own fix. This grepping of the codebase is the real end goal of a source-level fix, ensuring that nothing bypasses the accessible pattern.
A design system is the solution to the problem of fixing instances instead of the system. It provides an accessible pattern that becomes the default for all components. The design system should be the canonical path, making it the easiest choice for developers. If adopting the accessible pattern is more difficult than hand-rolling a dropdown, developers will likely revert to hand-rolling the dropdown, undermining the design system's purpose.
Building an accessible component is only the first step. Making it the single source for all instances is the true challenge. This means making the pattern so easy to adopt that bypassing it is harder than using it. It requires diligent code reviews to catch any reinventions and promptly fold them back into the source component. Periodically grepping the codebase for the pattern and updating stray instances is also necessary to maintain the integrity of the accessible design system.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.