Accessible form validation from scratch — preparing for validation

Part 3: Help text, instructions, required fields, and validation containers

Photo by Barrett Ward on Unsplash

In this article, I’ll go over how I’ll mark required fields, add help text, implement input groups, and add the markup for inline and summary validation.

In the next article, I’ll add styling.

Introduction

Here are the links to the articles in the series (so far):

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

But the markup needs a little more before we get into styling and JavaScript. Here are the topics for this article:

• Marking required fields
• Adding help text
• Preparing for inline validation
• Implementing input groups
• Preparing for summary validation

Marking required fields

How should we mark required fields? First, I hope we can all agree that the user must have some indication that fields are required — and that it should be done in a way perceivable visually and with assistive technology (AT).

Now that that’s out of the way, we can get to the debate of the best way to mark them.

As best as I can tell, there are four methods:

• Mark required fields with a symbol (usually an asterisk or icon).
• Remove all optional fields and inform the user that all fields are required.
• Explicitly state which fields are required in the label
  (e.g., “First Name (required)”).
• Only mark the optional fields in the label and inform the user that all fields are required unless otherwise stated.

All of these are compliant with WCAG (assuming they’re properly implemented), but I’m going for accessibility — not just compliance.

For that reason, I will mark all fields explicitly in the label.