Accessible form validation from scratch — the form’s basic structure

Part 2: The Markup

Photo by Jackson Sophat on Unsplash

This is Part 2 in my series on creating accessible form validation from scratch. In this article, we’ll create the form in HTML.

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

The previous article:
Accessible form validation from scratch — Part 1: Requirements

Table of Contents

• Introduction
• The <form> element
• Adding text boxes
• Adding a <select> control
• Adding checkboxes and radio buttons
• Adding a <button>
• Let’s put it all together
• Conclusion
• Links

Introduction

I’ll go through these one at a time, explain the markup, and test them with assistive technology (AT). For brevity, I’ll be using JAWS and NVDA — though keep in mind, screen readers are not the only form…