Accessible form validation from scratch — Styling

Part 4: Focus management, offloading to CSS, hiding irrelevant elements.

Photo by Arno Smit on Unsplash

In this article, I’ll (finally) add styling to the form, attempting to maximize what CSS can do as opposed to using JavaScript.

In the next (and perhaps final) article, I’ll add JavaScript to perform the validation.

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

For this article, I’ll cover the following topics:

• Making our eyes hurt less
• Focus management
• Highlighting validation areas
• Hiding what’s not immediately relevant
• Using aria-invalid to show inline validation
• Bells and whistles

I’m going to try my best to keep the styling simple. I want to add focus when it’s justified and provide separation where it makes sense. The colors and fonts I use are quite basic. The styling is a template, little more…