0

I'm curious how to read all errors that appeared when HTML form is filled and the button clicked.

All errors - such as "please enter your middle name", "please enter your age" and so on should be pronounced.

aria-invalid="true", role="alert", aria-atomic="true" and their combinations were tested.

It doesn't work at all or works fine, but reads only one error. I need all errors to be pronounced.

Any standard way to do that using HTML?

This question is both for ChromeVox and JAWS.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • What is "Screenbox reader"? And your title says ChromeVox, your tag says Jaws -- about which screen reader(s) is your question? – unor Apr 13 '16 at 09:00
  • Thank you. The question was updated. As far as there is no ChromeVox tag, only JAWS-screen-reader tag was added. JAWS read all errors, ChromeVox read only the first one. I'd like ChromeVox to pronounce all errors. – Haradzieniec Apr 13 '16 at 12:51

1 Answers1

0

I believe what you are looking for is called ARIA Live Regions.

<form onSubmit="...">
  <input id="username" />
  <span
    aria-live="polite"
    aria-controls="username"
  >Username is required.<span>
  <button type="submit">Submit</button>
</form>

Be sure that the element with the aria-live attribute exists in the page before the error is dynamically inserted into the element.

Beau Smith
  • 33,433
  • 13
  • 94
  • 101