Overview
What this challenge is about.
Build four WCAG 2.2 AA accessible chart components in React and TypeScript, pass an accessibility audit, and earn a verifiable certificate.
The scenario
Northlight Analytics is a roughly 180-person business-to-business software company in Toronto with about USD 28M in annual recurring revenue, selling embedded analytics that its six enterprise customers render inside their own products. Accessibility conformance is now a contractual procurement gate for its public-sector and regulated customers, so chart components must meet WCAG 2.2 AA before they can ship.
The Brief
What you'll do, and what you'll demonstrate.
Deliver four React and TypeScript chart components (bar, line, scatter, heatmap) that conform to WCAG 2.2 AA, with Storybook documentation and a per-component accessibility statement.
Earning criteria — what you'll demonstrate
- Translate WCAG 2.2 AA success criteria into concrete, testable component behavior for data visualizations.
- Implement keyboard navigation and ARIA narration for non-trivial chart types including scatter and heatmap.
- Design a consistent, reusable component API in TypeScript that survives multiple embedded theming contexts.
- Produce procurement-grade accessibility documentation and automated accessibility test coverage.
- Verify contrast and focus visibility across light and dark backgrounds using objective tooling.
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Aligned coursework coming soon.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
- Accessibility
Ensure digital products are usable by people of all abilities, meeting WCAG standards.
- Wcag 2
Apply wcag 2 to solve real industry problems and demonstrate production-level capability.
- React
Build component-based UI with hooks, state management, and modern React patterns.
- Typescript
Write type-safe code that scales across large codebases and teams.
- Component Library
Apply component library to solve real industry problems and demonstrate production-level capability.
- Data Visualization
Transform complex data into clear, insightful visual representations.
Careers
Career paths this challenge builds toward
Completing this challenge demonstrates skills that transfer directly to these roles:
Accessibility-Focused Frontend Engineer
This challenge mirrors the daily work of an accessibility specialist on a product team: turning WCAG criteria into shippable component behavior, proving conformance with audits, and writing statements that satisfy procurement. It builds the evidence-driven habits that distinguish this role.
This challenge sharpens
- accessibility
- wcag-2
- react
Design Systems Engineer
Shipping four charts under one consistent, themeable API is exactly the design-systems mandate: reusable components that hold up across many embedding contexts. The work demonstrates API design, token-driven theming, and documentation maturity that hiring teams look for.
This challenge sharpens
- component-library
- typescript
- react
Data Visualization Engineer
Making bar, line, scatter, and heatmap charts both legible and operable without sight is the hardest part of visualization engineering. This challenge bridges to roles that pair chart craft with rigorous accessibility and tabular-alternative thinking.
This challenge sharpens
- data-visualization
- accessibility
- component-library