Accessible Form Instructions and Errors

A clear form tells visitors what each field is for, which fields are required, and how to correct an error. A label is the starting point, not the entire instruction system.

<label for="phone">Mobile number</label>
<p id="phone-help">Include the country code, for example +91.</p>
<input id="phone" name="phone" type="tel"
       aria-describedby="phone-help phone-error">
<p id="phone-error">Enter a number with its country code.</p>

In a real form, show an error only when it applies, and connect it to the relevant field. aria-describedby can associate help and error text with a control. aria-invalid="true" can indicate that the current value is invalid after validation has run.

Do not rely on a red border alone. State what is wrong and how to fix it. After an unsuccessful submission, consider an error summary at the top of the form with links to the affected fields.

A live region can announce dynamic feedback, but announcing every keystroke is noisy. Use it for useful changes, such as a submission result or a validation summary. The server should return clear validation errors too.