Building Accessible Forms & Modals: 5 Practical Rules for Modern Web Apps

Forms and modal dialogs represent the most critical conversion checkpoints on any digital product. When accessibility fails here, sign-ups drop and checkouts stall.

Here are 5 core rules to make forms and modals accessible for all users.

---

1. Always Link Explicit <label> Elements

Placeholders disappear when typing begins and fail to provide permanent context for screen readers.

<label for="checkout-email" class="block text-sm font-bold">
  Email Address <span aria-hidden="true">*</span>
</label>
<input id="checkout-email" type="email" required autocomplete="email" />

---

2. Announce Validation Errors with aria-describedby

When validation fails, link the input directly to the error message container using aria-describedby and set aria-invalid="true".

---

3. Trap and Restore Focus in Modals

1. Move focus to the first interactive element or dialog heading on open.
2. Ensure Tab and Shift+Tab cycle strictly inside the modal container.
3. On pressing Escape, close the modal and restore focus to the triggering button.

---

4. Never Strip Focus Rings without a Custom Replacement

Use modern :focus-visible to style focus indicators beautifully without harming mouse users:

button:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 3px;
  border-radius: 8px;
}