Meter

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-meter" style="--lo:.5;--hi:.85"
     data-good="Plenty free" data-fair="Getting full" data-poor="Nearly full">
  <div class="tui-meter__head">
    <label class="tui-label" for="disk">Storage used</label>
    <span class="tui-meter__value">72 GB</span>
    <span class="tui-meter__state">
      <span class="tui-lamp" data-lamp="amber" data-on aria-hidden="true"></span>
      <span class="tui-meter__words">Getting full</span>
    </span>
  </div>
  <div class="tui-meter__strip">
    <meter id="disk" min="0" max="100" low="50" high="85" optimum="20" value="72">72 GB</meter>
  </div>
  <div class="tui-meter__marks" aria-hidden="true">
    <span class="tui-meter__mark" style="--at:0"><span>0</span></span>
    <span class="tui-meter__mark tui-meter__mark--cut" style="--at:.5"><span>50</span></span>
    <span class="tui-meter__mark tui-meter__mark--cut" style="--at:.85"><span>85</span></span>
    <span class="tui-meter__mark" style="--at:1"><span>100</span></span>
  </div>
</div>

import { setMeter, meterState } from '/kit/kit.mjs';

// Sets the native value, the lamp, the state's words and fires tui-meter-change.
setMeter(document.querySelector('.tui-meter'), 91);

meterState(91, { min: 0, max: 100, low: 50, high: 85, optimum: 20 });   // 'poor'
meterState(72, { min: 0, max: 100, low: 50, high: 85, optimum: 20 });   // 'fair'

Needs kit.css only, no script. How to install the kit.

• The strip is a native <meter> with a real <label>, so a screen reader says “Storage used, meter, 72 of 100”, with the range and the value, and no ARIA is needed.
• The state is said in words next to the strip (“Getting full”) with a lamp that agrees; the lit length changing colour is never the only sign. The marks and the cut lines are decoration for the eye and are hidden, since the thresholds are in the meter itself.
• The words are the secondary ink, at least 4.5:1 on the plate, and the strip is a dark window whose edge is seen at 3:1 in every finish.
• It takes no focus. The lit length eases for 120ms when it changes; under reduced motion it does not, and every figure is the same.
• On a phone the strip and the marks scale to the width and the first and last marks stay on the plate, so there is no sideways scroll at 390px.

It is the ladder’s dark glass with the opposite idea in it. The ladder paints its segments by position, green then amber then red along its length, so it shows how far up a scale something is. The meter paints the whole lit length one colour, chosen by the native meter from low, high and optimum, so it shows whether the value is good: the same 40 on a strip whose good end is high is red and on one whose good end is low is green. The cut lines and printed marks are drawn from two custom properties, and the segment gaps are laid over the browser’s own bar.