« Back to home

Testing form field errors

Which of the form fields below has:

• An error message that is programmatically associated with the field? (via aria-describedby)
• A programmatically identified invalid state? (via aria-invalid="true")

Example 1

• The error message is not associated with the form control.
• The form control is not defined as invalid.

Not recommended. Screen reader users may not be told that the field has an error or hear the error message when they move to the field.

<label for="na">Full name</label>
<input id="na">
<span>You must include a full name</span>

Example 2

• The error message is associated with the form control.
• The form control is not defined as invalid.

Not recommended. Screen reader users may hear the error message when they move to the field, but may not be told that the field is currently invalid.

<label for="em">Email address</label>
<input id="em" type="email" aria-describedby="bbb">
<span id="bbb">You must include a valid email address</span>

Example 3

• The error message is associated with the form control.
• The form control is defined as invalid.

Recommended. Screen reader users can be told that the field is invalid and hear the error message when they move to the field.

<label for="ph">Phone number</label>
<input id="ph" aria-describedby="ccc" aria-invalid="true">
<span id="ccc">Include your area code</span>

« Back to home