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…