Here’s the thing, HTML default field validation is nice in theory but it doesn’t work consistently across all the major screen readers and most accessibility experts will tell you not to rely on it.
Avoid Default Field Validation
I tested your form with JAWS and NVDA, and while NVDA was actually pretty good (it read the error message and indicated that focus shifted to the offending input) JAWS only read the error. And apparently your testing with Narrator wasn’t much better. Also, whenever using the
required attribute you have to manually manage the
aria-invalid attribute as well because screen readers will automatically announce “invalid” as soon as the user focuses on the input before they have even had a chance to type anything (which is annoying) and will often keep announcing “invalid” every time a character is typed until they have met the requirements (which is hella annoying).
Required attribute requirements
Bottom line, don’t rely on HTML default field validation and instead handle errors yourself. Here are a few links to suggested error handling techniques:
Of course if the tests for this project require using HTML default field validation then you have no choice. I’m talking “real world” here
As this example demonstrates, unfortunately, not all HTML is completely accessible out of the box.
HTML: The Inaccessible Parts
Some of these can be fixed with aria attributes and JS and some of it just needs to be forgotten about completely (looking at you