42Meter

Native for a score against a threshold — quiz results, code coverage. Carries low/high/optimum semantics lacks; the fill colour follows the band the value lands in.

Use it for

"78/100, and is that good?"

Not for

"How far along" — Progress bar. They announce differently; swapping them makes the announcement wrong

Bands

88/100

62/100

34/100

markup

<div class="ns-progress-row" style="max-inline-size:20rem">
  <meter class="ns-meter" value="88" max="100" low="50" high="80" optimum="100" aria-label="Score 88 of 100"></meter>
  <span class="ns-progress-row__value">88/100</span>
</div>
<div class="ns-progress-row" style="max-inline-size:20rem">
  <meter class="ns-meter" value="62" max="100" low="50" high="80" optimum="100" aria-label="Score 62 of 100"></meter>
  <span class="ns-progress-row__value">62/100</span>
</div>
<div class="ns-progress-row" style="max-inline-size:20rem">
  <meter class="ns-meter" value="34" max="100" low="50" high="80" optimum="100" aria-label="Score 34 of 100"></meter>
  <span class="ns-progress-row__value">34/100</span>
</div>

Accessibility contract

aria-label names the measurement