What kind of visual property are you setting on the fields? Just giving them a red outline? Is that sufficient for visual users? You are not displaying an error message associated with the field?
I would kind of expect to see some kind of error message to tell me what is wrong with the field so that I know how to correct it.
Setting aria-invalid
is a good start, and it's also good that you are asking how to notify the screen reader user that the field became invalid. If you are not displaying any error messages, then you should probably have a visually hidden (*) error message inside of an aria-live
region and that will handle announcing the message to the screen reader user.
(*) For visually hidden text, do a google search on the "sr-only" class, or look at What is sr-only in Bootstrap 3?
<input aria-invalid="true">
<span id="myerror" aria-live="polite" class="sr-only"></span>
When you validate the field and find an error, insert new text into the "myerror" <span>
and the screen reader will announce it.
However, as mentioned earlier, it is common to visually display the error message. If you want to do that, you can use the same <span aria-live="polite">
but don't use the "sr-only" class so that the error message is visible to everyone. Then associate the error with the <input>
using aria-describedby
.
<input aria-invalid="true" aria-describedby="myerror">
<span id="myerror" aria-live="polite"></span>
Take a look at WCAG success criteria 3.3.1 - Error Identification. It has some tips on how to handle errors.
You can also look at WebAIM's "Usable and Accessible Form Validation and Error Recovery"