Page Comparison

...

Make inline error messages accessible to screen reader users by adding using ARIA labels.

• Most screen reader and browser combinations announce a form control as “required” when using the required attribute.

• Prevent screen readers from announcing required form controls as invalid by default, by using aria-invalid="false".

• Update the aria-invalid attribute to “true” if the current value (or lack of value) of a required control does not pass validation.

• Wait to declare form controls as invalid and display inline error messages once the control has lost focus, or there has been an adequate delay in key presses (a few seconds)

• Use aria-describedby on required form controls to point to an element that will contain any necessary inline error messaging.

• Can’t always rely on browser’s client-side error validation to be accessible.

• Create a custom client-side validation script and helpful messaging by suppressing the browser’s default validation message by adding the novalidate attribute to the form element. 

Markup - Default Error Message TreatmentRequired Form Control

<form novalidate>
<label for="name"> Name:</label>
<input id="name" aria-required="true" required aria-invalid="false">
</form>

Markup - Invalid Error Message Treatment

<form novalidate>
<label for="name">  Name:</label>
<input id="name" aria-required="true" required aria-describedby="name_msg" aria-invalid="true">
<span id="name_msg">Please enter your name.</span>
</form>
<form novalidate>
<label for="Email">  Email:</label>
<input id="Email" aria-required="true" required aria-describedby="emal_msg" aria-invalid="true">
<span id="email_msg">The email address entered is invalid.</span>
</form>

...