Overview
What this challenge is about.
Build a WCAG 2.2 AA Accessible Chart Component Library. Advanced challenge in code. Writing production code that solves real engineering problems, earn a blo...
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.
This is not a coding exercise. It is the work a software engineer does between a Jira ticket and a merged PR. That distinction matters to every hiring manager who has seen candidates solve LeetCode problems and none who have shipped production code under real constraints.
When you finish, you will have something most graduates do not: a real-world deliverable, verified by Ewance, that you can show to a hiring manager and say "I did this. Here is the proof."
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