output elementThe <output> element is a container element into which the results of a calculation or the outcome of a user action can be injected.
<output> has an implicit ARIA role of status, which itself carries an implicit aria-live="polite" and aria-atomic="true". In other words, updating its content is supposed to trigger a screen reader announcement automatically, with no extra ARIA needed.
In practice, real-world support has known gaps and quirks across browser and screen reader combinations, some worse than others. Because of this, many teams pair <output> with a manual, hand-built announcement as a pragmatic backup, rather than relying on the implicit role alone. That's what this demo does below, and it's worth testing with your own browser and screen reader combination to see whether you get one announcement, two, or none at all from the native element by itself.
Further reading: Scott O'Hara's rundown of output's real-world quirks.
Use the form below to add two values together and calculate the result:
<input type="number" id="a" aria-label="Value 1"> +
<input type="number" id="b" aria-label="Value 2"> =
<output for="a b" name="result" id="result">0</output>
<div aria-live="polite">
<!-- Dynamic message, a manual backup alongside output's own
implicit status role -->
</div>