The <output> Element
As defined in the HTML Living Standard, the <output> element represents the result of a calculation performed by the application, or the result of a user action.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="10"> =
<output name="result" for="a b">60</output>
</form>
View HTML Living Standard: The output element
Technical Attributes
for: A list of space-separated IDs of other elements that contributed to the value of the output. This is the most important attribute for programmatic relationships.form: Associating the element with a specific<form>if it is not a child of that form.name: Specifies the name of the element, used when submitting a form.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The for attribute on an <output> element is essential. It tells assistive technology which input fields are linked to this specific result. When the value changes, screen readers that support the element can notify the user that the "Total" or "Result" has been updated based on their input.
Dynamic Feedback & ARIA
The <output> element has an implicit ARIA role of status in many browsers. This means it behaves like a "Live Region."
- Implicit Politeness: Content changes inside an
<output>are typically announced by screen readers when the user is idle, providing helpful feedback without interrupting current navigation. - Explicit Live Regions: If your output is highly critical (like a countdown timer or a security alert), you may need to supplement it with
aria-live="assertive"to ensure immediate announcement.
A11y Tip: Resetting Values
When a form is reset, the <output> element also resets its text content to its initial value. Ensure that your JavaScript logic accounts for this so that the visual result and the programmatic value stay in sync, satisfying WCAG SC 4.1.2 (Name, Role, Value).