Here's something I didn't know existed since 2018. The output HTML element can be used to show the result or outcome of a calculation.

The idea, apparently, is to mirror input. The example given in the MDN site is:

<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

And then some JS to update it. Very nice.

It also supports aria-label, so you can specify how to read what's inside. For my team, it helped screenreaders interpret 10 – 20 as "ten to twenty" instead of "ten twenty" or whatever, like so:

<output aria-label="10 to 20">10 &ndash; 20</output>

Previous on HTML
Mastodon Mastodon