1

I am trying to make a webpage accessible using aria tags where necessary.

When the user presses Submit, I am validating the fields using jQuery and setting a visual property to any invalid fields, and setting the aria-invalid tag to true.

This all works, but what is the recommended way of informing a visually impaired (VI) user that the form is invalid? I don't really want to show an alert, so at present, it is visually clear that it is invalid, and the aria tags are set, but unless the user then tabs back to the invalid field, s/he will not know what is wrong.

Jawa
  • 2,312
  • 6
  • 33
  • 36
StripyTiger
  • 603
  • 8
  • 22

1 Answers1

0

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"

slugolicious
  • 8,671
  • 1
  • 20
  • 30