Forms
Accessible text inputs: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Give text inputs visible labels and explain important constraints before entry. Use semantic input types and accurate autocomplete values where the input purpose is covered, then associate hints and errors without replacing the label.
A practical example
A contact form asks for an email address. It uses an email input, a visible label and a short hint explaining where replies will go. The label remains visible after typing begins.
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.
This example stays in your browser and is not submitted.
How to check it
- Focus the field and verify the announced label, type and associated hint.
- Enter a valid value and a malformed value, checking that validation preserves the entry and identifies the error.
- Test autocomplete where appropriate and compare the accessible name with the visible label.
What can be missed
Disappearing input hints cannot replace persistent labels. An aria-label that conflicts with the printed label can also make speech input less reliable.
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="reply-email">Email address</label>
<input id="reply-email" name="email" type="email" autocomplete="email" aria-describedby="reply-hint">
<p id="reply-hint">We will reply to this address.</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.