Honest and accessible charts
🎯You'll be able to
Draw charts whose shapes match their numbers, avoid misleading scales, and make charts readable for people with colour vision differences, on small screens and with screen readers.
🏠The everyday picture
A tailor's measuring tape starts at zero. If it started at 50 cm, every measurement would look much smaller than it is.
📘What it really is
-
Bar charts start at zero. A bar's length is what readers compare; cutting the axis exaggerates differences. Line charts may start above zero when the change matters more than the level, if the axis is clearly labelled.
-
Same scale for comparisons: two charts side by side should share an axis, or readers will compare shapes that mean different things.
- No dual axes for different measures unless clearly labelled; they invite false correlations.
-
Colour: don't rely on red and green alone; about 1 in 12 men has a red-green colour vision difference. Use labels, patterns or a colour-blind-safe palette, with good contrast.
-
Text alternatives: an SVG chart with
role="img"and a<title>, followed by a table of its numbers, works with screen readers. The table also helps everyone who needs exact values. -
Small screens: charts that scale to the width (
viewBoxandwidth="100%"), with labels that stay readable. - Uncertainty and incompleteness: mark today's partial day, estimates and small samples on the chart.
📝A worked example
Input: open the starter's dashboard and look at the store bars, then compare with the values.
Expected output: the starter's tallest bar (Hadapsar, about ₹9.6 lakh) is drawn about 7 times as tall as Baner's (about ₹5.9 lakh), though Hadapsar's revenue is only about 1.6 times Baner's, because its axis starts at 90% of the smallest value. Its bars are red, with no title and no table. The solution's axis starts at zero, so Hadapsar's bar is 1.6 times Baner's, and every chart has a title and a table. Project 3 test 4 checks the bar heights against the warehouse values.
🌍Where it's used
- Newsrooms: chart style guides that require zero baselines for bars.
- Government: accessibility rules for public websites, which cover charts.
- Companies: shared chart templates with safe colours.
📝Case scenario
A company's sales review showed this year's bar much taller than last year's. The axis started at ₹90 crore; the real growth was 4%. The board approved a hiring plan based on the picture. After that, the finance team's template locked bar charts to a zero baseline.
🖱️Try it
Fix the starter's bar chart: start the scale at zero, add a title, and add a table with the numbers. Success: Project 3 tests 4 and 8 pass for your dashboard.
⚠️Common mistakes
- Truncated bar axes. Sign: small differences look huge. Fix: start bars at zero.
- Colour as the only signal. Sign: "the red ones" can't be found by some readers. Fix: labels and patterns too.
- Charts with no text alternative. Sign: a screen reader announces nothing useful. Fix: a title and a table of numbers.
🛠️For your project
Project 3 tests 4 and 8 check honest bar heights, titles on charts and a table after each chart.
✅Quick check
Why must bar charts start at zero?
Show the answer
Readers compare bar lengths; a cut axis exaggerates differences.
What makes an SVG chart accessible?
Show the answer
role="img", a title, and a table of the numbers beside it.