Search code examples
htmlvalidationscreen-readersconstraint-validation-api

Screen Reader and HTML validation

Using HTML5 validation and screen readers, is there a way to make the screen reader read the HTML validation message?

<form>
    <input type="email" required="required">
</form>

If an invalid email is entered we get an HTML validation message

enter image description here

Our issue is that the screen reader never reads this validation message, is there a way to make it do so?

Solution

  • Take a look at my answer to Must I use aria-invalid when I invalidate a field using the HTML5 constraint validation API?

    At first it might seem unrelated but it has to do with using the built in "constraint validation" API, which it sounds like you're using. In summary, the internal object.validity.valid property is set but only some screen readers are honoring that attribute (the screen reader will announce the field is in error), and even when it's honored, the error message is not properly associated with the field in error so you won't hear the error message.

    So currently the answer is, "no", you can't force the screen reader to read the built in error message, which is unfortunate.

    To properly associate an error message with a field, see the aforementioned answer.