Is HTML5 form validation truly accessible?

Question

So I read a lot of articles that say that HTML 5 form validation is accessible (things required attribute which will prevent the form from being submitted is a field is left blank), yet when I tested my form on NVDA on Chrome and BackTalk on Android, if I hadn't filled in the input, it focuses back to the input field (which is good!) but both screen readers announce "Please fill in this field" which is useless to the user, since they don't announce the label of the field.

So HTML5 validation alone isn't accessible? Also, can you combine HTML5 validation and custom JS?

Do you have to write custom client site validation in order to make forms accessible?

Answer 1

Short Answer

Yes the standard HTML5 validation is accessible and will pass WCAG2.1 AA, but you can do a lot better with some JavaScript.

Long Answer

If you need to support Internet Explorer 9 or below then you will need to use JavaScript (which according to WebAim survey - section "Browsers" still covers around 3.6% of screen reader users).

Native HTML5 validation is a very good starting point, but there are limitations (you gave one in a comment, some screen readers (NVDA) do not announce the label again, meaning a user has to physically ask for the label to be read via controls).

The other thing is that once you leave a field it doesn't normally tell you you have made a mistake until you have submitted the form (it is meant to but this is not always the case depending on your announce speed, settings and browser).

For example updating aria-invalid is useful for immediate feedback (and provides support for older browsers, while being more robust with 'unusual' screen readers).

Using an aria-live region to provide immediate feedback onblur (or throttled / debounced) is also useful and a better solution.

One other thing is that the native validation is not actually very effective. For example fff@fff shows as a valid email and will allow a form to submit on a type="email" field, same with type="url" it will allow https://fff to be submitted (in Chrome at least).

I could go on with other things such as providing better instructions on how to fix errors (especially for things like phone numbers) but you get the idea.

Basically, use as many native HTML5 features as possible to give a solid grounding and a good fallback for JavaScript errors / people not using JavaScript. Then use CSS and JS to improve the experience for everyone.

Also, can you combine HTML5 validation and custom JS?

You can and you should but be aware that you end up doubling up validation (which isn't a bad thing as I stated for fallback).

The beauty is you can use pseudo selectors in your JavaScript to target fields by type, saving the need for adding unnecessary classes etc.

e.g. document.querySelectorAll('input[type=email]') could be used to select any email input for validation or document.querySelectorAll('input[required]') to find all required fields.

You can also use things like max="100" on slider / numeric inputs to set your validation ranges 'on the fly' and still have a fallback for no JavaScript.

As you can imagine this let's you write a library if you can't find an off the shelf one that is reusable on nearly any form.