Audit & Fix Accessible Design System Components
Identify accessibility gaps in design system components and implement correct ARIA attributes, keyboard interactions, and semantic markup to enforce inclusive practices
You're reviewing a product team's design system component library. Four components have accessibility issues that will propagate across all products using them. Click each component to reveal the problem, then select the correct fix. Primary Button Button lacks focus indicator and has no keyboard support. Developers copy-paste this into 50+ products. Add :focus-visible outline, ensure tabindex=0 or semantic <button>, implement Enter/Space key handlers Add aria-label only—doesn't solve keyboard interaction Increase font-weight for visibility—addresses visual but not keyboard users Use onClick handler exclusively—fails for keyboard navigation Components enforce practices at scale. A broken button component breaks accessibility in every product using…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in