Nobody Reads Your Chart When They're Worried About Their Blood Pressure

Health dashboards get designed for the calm version of the user — someone leisurely reviewing trends over coffee. The real user is often checking a number because something feels off, and they need the answer in under three seconds. That's an accessibility problem before it's a design problem, and React gives you the tools to fix it if you use them deliberately.

Numbers before charts

A line chart is a great way to show a trend and a terrible way to answer "is this number bad right now." Pair every visualization with a plain-language, screen-reader-friendly summary:

function VitalReading({ label, value, unit, range }) {
  const status = value < range.low ? "low" : value > range.high ? "high" : "normal";

  return (
    <div className="vital-reading">
      <span className="visually-hidden">
        {label} is {value} {unit}, which is {status}.
      </span>
      <p aria-hidden="true">
        {label}: <strong>{value}{unit}</strong>
      </p>
      <StatusBadge status={status} />
    </div>
  );
}

The aria-hidden chart stays visual-only; the hidden span is what a screen reader actually announces, and it's phrased as a sentence, not a data dump.

Color can't be the only signal

Red/green status indicators fail for a meaningful share of users, and they fail everyone in bright sunlight on a phone screen. Pair color with shape or text every time — a triangle for "high," a circle for "normal." It's a small addition that costs you almost nothing in build time.

The tradeoff worth naming

Fully accessible health dashboards take longer to build than ones optimized purely for visual polish. Screen-reader testing, keyboard navigation through charts, and reduced-motion variants aren't free. But in this domain, the cost of an inaccessible interface isn't a bad review — it's someone missing a warning sign in their own data. That's a different category of bug, and it's worth budgeting for accordingly.