Accessible form validation from scratch

Part 1: Requirements

Photo by Vanessa Bucceri on Unsplash

This is the first in a series of articles to create an accessible form validation example from the ground up, using nothing but HTML, CSS, and JavaScript. No libraries, no pre-processors, no frameworks, not even jQuery.

It’ll be a very simple form that you can extend to your needs.

Here are the links to the rest of the series (so far):

• Part 2: Markup
• Part 3: Preparing for validation
• Part 4: Styling
• Part 5: JavaScript

The big picture

I am not working toward a solution that’s just compliant with standards such as WCAG — I’m work toward the maximally accessible one. In that quest, I will create a solution from scratch.

I don’t pretend that it’ll be perfect. In fact, I’ll be asking for your feedback along the way — because if I know me, then I’ll have a few screwups in store. Feel free to point those out.

This article will cover the requirements for the example. Again, if I miss something, let me know in the comments — and I’ll update the article, if needed.

Why am I doing this?

You’ve likely seen many proposed solutions for accessible form validation. There’s no shortage of articles dedicated to a single part of validation, such as “inline validation” or the use of the aria-invalid attribute.

I’m not denigrating anyone’s work on this necessarily, but they all seem to be missing certain types of users with varying disabilities. Many also seem to be satisfied with one that is simply compliant with WCAG.

I hope to provide a comprehensive example that covers each aspect of form validation.

Photo by Volodymyr Hryshchenko on Unsplash

Requirements

Requirement #1: Markup is accessible

This seems like a no-brainer, but I’m including it because it’s important — and because I still see inaccessible markup, even in the forms of…