Skip to the page
Tactile UI Kit

LED bar chart

A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value.

Take a reading: bars rise fast and fall slowly, and the peak segment lingers. Point at a column, or Tab in and use ← →, to read it on the display.

  • The chart is a role="group" named by its label and described by one generated sentence: how many bars, the range, the highest and lowest, and who is over each line.
  • Every column is a role="meter" named by its label, with aria-valuenow, min, max and an aria-valuetext in words: “1,920 requests per minute, over the alarm line at 1,800”. They update with the data; browse through them to read the whole chart.
  • One tab stop, then the arrow keys, Home and End. Focus is a 2px ring drawn in light on the glass, where an ink ring would vanish.
  • Colour is never alone: the scale prints a wedge at each line, the readout prints the value, and the words say which line it is past.
  • Reduced motion: the bars jump to the new readings; the peak segment keeps showing the last reading’s top until the next, without falling.
Tactile UI Kit
Get the Founder Pass