The <output> Element
As defined in the HTML Living Standard, the <output> element is a container for the result of a calculation or a user action. It is typically used in conjunction with form inputs.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0">
<input type="number" id="b" value="0">
<output name="result" for="a b">0</output>
</form>
View HTML Living Standard: The output element
Technical Attributes
for: A space-separated list of IDs of the elements whose values are used as inputs to the calculation. This provides a programmatic link between the inputs and the result.form: Associates the output element with a form, even if it is placed outside the form tags.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined.
Using <output> instead of a generic <span> or <div> tells assistive technology that this specific area contains the result of an action. When the value changes, screen readers can be notified of the update, ensuring the user is aware of the calculation result without having to manually search for it.
Best Practices for Accessibility
To ensure the best experience for all users, consider the following:
- Live Regions: For highly dynamic results, consider adding
aria-live="polite"to the output element so that screen readers announce the change automatically. - Clear Labeling: Always provide a clear text label (via
<label>or surrounding text) so the user knows what the output represents.
A11y Tip: The 'for' Attribute
The for attribute is not just for documentation; it creates a semantic relationship. This helps assistive technologies understand the dependency between the input fields and the resulting output.