Accessible Forms That People Actually Finish

Forms fail quietly: a missing label, an error that never gets announced, a focus trap that locks someone out. Small HTML and ARIA choices fix most of that.

Labels are not optional

Every control needs a visible <label> tied with for/id, or wrap the input in the label. Placeholder text is not a label—it disappears when the user types.

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required />

Describe errors next to the field

Put the message near the control and connect it with aria-describedby. Move focus to the first invalid field on submit so keyboard and screen-reader users land on the problem.

<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<p id="email-error" role="alert">Enter a valid email address.</p>

Keep focus visible and predictable

Never remove outline styles without a clear replacement. After a successful submit or modal close, send focus somewhere sensible—often the success message or the next primary action.

Wrap-up

Accessible forms are mostly plain HTML done carefully: real labels, announced errors, and focus that follows the user’s intent.