Status and feedback
Accessible inline validation errors: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Inline errors identify the affected field and explain what must change. Connect the message to the control, keep useful instructions available and distinguish invalid user input from a service failure.
A practical example
A date input receives “Choose a date after your arrival date.” The field exposes its invalid state and references the message while retaining the entered date for correction.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
How to check it
- Trigger a specific validation failure through the intended user action.
- Inspect aria-invalid and the description relationships, including any persistent hint.
- Correct the value and verify that both visual and programmatic error states clear at the appropriate time.
What can be missed
Avoid marking untouched required fields invalid as soon as the page loads. A red outline without text cannot explain the correction, and a stale hidden error can keep being announced.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<label for="departure">Departure date</label>
<input id="departure" type="date" aria-invalid="true" aria-describedby="departure-error">
<p id="departure-error">Choose a date after your arrival date.</p>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.