Carbon Accessibility Testing & Status Dashboard
Expanded accessibility testing across Carbon React and introduced a dashboard that gives teams clear, real-time visibility into component accessibility status. This work improved confidence in coverage and made accessibility progress easy to track across the library.
Summary
Expanded accessibility testing coverage for Carbon React components and developed a dynamic status dashboard to surface results on the website. The dashboard pulls updated test coverage with each release, displaying accessibility status both on individual component pages and in a consolidated view. This gave teams immediate visibility into coverage and reduced risk for products building on Carbon by making gaps clear and actionable.
Background
The Challenge: Carbon's accessibility testing coverage for React components was inconsistent. Some components had strong accessibility validation, while others had little or none, making it hard to know whether they could be safely relied on in products. Even when tests existed, results weren't visible in a central place, leaving teams unaware of accessibility gaps.
The Need: Both stronger, more consistent test coverage and a way to surface results publicly so teams could make informed decisions and prioritize improvements.
My Role: Led the expansion of accessibility testing and built the dashboard system to surface results across the Carbon website and internal Carbon for IBM Products site.
Approach
Accessibility Audit: Conducted full audit of Carbon React components to establish baseline coverage. Created individual GitHub issues for each component, grouped under a central epic to track progress across the library.
Expanded Testing: Added automated accessibility tests directly in Carbon React to close identified gaps. Exported test results from the React codebase to make coverage status externally accessible.
Dashboard Development: Partnered with design to build configurable MDX components that could pull in results dynamically. Designed with variant selectors to display accessibility status in multiple contexts:
Integration: Extended dashboard to internal Carbon for IBM Products site, giving IBM teams the same clarity and confidence in accessibility readiness across the greater Carbon ecosystem.
Challenges
One challenge was the lack of consistency in how accessibility tests were named across components. Without a standard, the reporting wouldn’t align correctly, so we had to refactor and normalize test names to make the dashboard reliable.
Another challenge was accounting for components with multiple variants. Each variant required its own testing and status reporting, which added complexity to both the test suite and the way results were displayed.
We also faced mismatches between naming conventions in Carbon React and the Carbon website. To bridge this gap, we wrote custom logic to ensure results were surfaced correctly and tied back to the right component pages. This extra mapping work was essential to keep the dashboard accurate and trustworthy.
Outcomes
The most significant outcome of this work was improved accessibility test coverage across the Carbon React library. By adding new automated tests and closing gaps identified in the audit, we established a consistent baseline of accessibility validation for components that teams across IBM could rely on.
In parallel, we built a dashboard that surfaced those results on the Carbon website, giving teams immediate insight into accessibility status at the component, page, and library level. Extending the same experience to the internal Carbon for IBM Products site gave IBM teams a unified view of coverage across the design system.
Together, these improvements reduced risk for products building on Carbon and increased confidence in accessibility compliance. By pairing stronger test coverage with transparent reporting, we not only improved the technical foundation of the library but also created accountability and a model for sustaining accessibility going forward.