HTML form help: connect visible instructions and errors to a control

Last updated: 5 Oct 20268 min read

tutorial

Aria-describedby connects a control to descriptive text in the same document while its label still names the field.

Implementation choice

A technician enters a calibrated sensor code. The instruction defines its format, and a server rejection appears below the field when the code is not in the registry. Both messages have IDs referenced by the input, so they stay attached when someone moves focus directly to the control. The sample shows the rejected state intentionally; after a correction, the application must update the visible error, the aria-invalid state, and the description references together.

<form action="/sensors/register" method="post">
  <label for="sensor-code">Sensor code</label>
  <p id="sensor-help">Use the eight-character code printed on the housing.</p>
  <input id="sensor-code" name="sensor_code" aria-describedby="sensor-help sensor-error" aria-invalid="true" value="SR-47" required>
  <p id="sensor-error">That code is not in the calibrated sensor registry.</p>
  <button type="submit">Check sensor</button>
</form>

What remains outside the markup

The description does not validate the code or make the error visible automatically. A server must decide whether the code exists; a client-rendered state must ensure both referenced IDs remain present while the error is announced.

Cost and limits

Two short text nodes have little load cost. The difficult work is state synchronization: stale errors and dangling ID references create misleading feedback after edits or asynchronous validation.