04
Charts
2023
Lantern
Accessible chart components for React. Every chart ships with a table view, keyboard controls and a text summary.

Role
Author
Stack
TypeScript, React
Install
npm i lantern-charts
Numbers
12 chart types, 22 kB, WCAG AA
Charts nobody can read
A chart is a picture of a table. If you cannot see the picture, you should still be able to get the table. Lantern renders both from the same data, so nobody has to keep them in step.
What is in the box
Twelve chart types, arrow-key navigation between points, a spoken summary that says what the trend is, and a contrast check that fails your build if a series colour is too pale.
Testing with real people
Before 1.0 I sat with three screen-reader users for an afternoon each. Their feedback changed the summary text, the focus order and the default colours. It is the only part of the project I would repeat exactly.
More / ls ./work
Keep looking.
mail iri

