Accessible Form Validation

Success Criterion 3.3.1 A and 3.3.3 AA both describe how to properly deal with accessible form validation.

If a user fails to fill out a required field, or a field isn’t filled out correctly, it should be obvious that an error has occurred. We already covered how to mark fields as required the right way so we can skip that part. Here are some important things to note:

• Errors should be obvious using both descriptive text and visual contrast
• Never disable the submit button

Handling an Error

Let’s assume the user forgot to type in their email address. If the input has a required attribute the browser should take the user back up the field and tell them they need to enter their email. There are some cases where that won’t happen.

If a user submits a form and forgets to type their email, or doesn’t type the whole thing, you can do the following:

• Highlight the field in a color that is both a good contrast from the other fields, and still readable.
• Add aria attributes to the input.
  • aria-invalid="true"
  • aria-describedby="email_validation_message" this should identify the id of the element that contains the descriptive text.
• Add a clear error message below or near the input with the id that you added in the aria-describedby attribute.
• Focus the first input that contains an error.
• Do not force the user to input the entire form again.

If you are validating your form in real time (onblur), and not waiting for the user to hit the submit button, you’ll need to use aria-live="polite" or add a role=”alert” to the element containing the error text. See an example below:

<input type="email" id="email" name="email" required aria-invalid="true" aria-describedby="email_validation_message">
<div id="email_validation_message" role="alert">Your email address is required.</div>

It really is that easy.