Skip to the page
Tactile UI Kit

Ring meter

The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.

Read usage: the lamps step round to the new share. The run’s countdown goes out from twelve, a lamp every ten seconds. The budget turns amber under 25% and red under 10% — every state is below.

  • The element is a role="meter" named by its label, with aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext that carries both rings and the line: “72 percent, reserved 85 percent” or “22 percent, down to the warning line at 25”.
  • Countdown time is said in words — “4 minutes 12 seconds left” — not as “4:12”.
  • The lamps, the dots and the digits are its picture and are hidden from assistive technology. It takes no focus.
  • Colour is never alone: the digits give the figure, the arc gives the share, and the words name the line.
  • Reduced motion: the lamps jump to the reading. Nothing blinks.
Tactile UI Kit
Get the Founder Pass