Accessible HTML forms

Make required fields unmistakable.

People need to know what is required before they submit—and browsers need the same information in code.

The principle

Required status needs two signals: visible words for people and a native attribute for software.

Two signals

Say it. Then encode it.

An asterisk may be small, missed, or unexplained. The word “required” is unambiguous. The HTML required attribute exposes the same constraint programmatically and enables native validation.

Don’tRely on an asterisk

The symbol is not explained, and the control has no required state in HTML.

Meaning depends on visual convention alone.

<label for="email">Email *</label>
<input id="email" type="email">
DoUse words and HTML

Try leaving it empty and pressing the button in the practice area below.

The requirement is visible and programmatically available.

<label for="email">
  Email address (required)
</label>
<input id="email" type="email" required>

Field anatomy

Each piece has one job.

Keep the accessible name concise. Put the requirement in the label and longer instructions in a description associated with the field.

Use at least 12 characters.

1

Label

Names the field and visibly says required.

2

Native constraint

required exposes the state to browsers and assistive technology.

3

Instruction

aria-describedby associates the persistent format hint without making it part of the name.

Choose a convention

Reduce visual noise.

Be consistent within a form. Mark required fields when the form is mixed. When nearly everything is required, say so once and clearly mark the exceptions as optional.

Mixed form

Mark every required field

Mostly required

Explain once; mark exceptions

All fields are required unless marked optional.

Try it

Let HTML communicate the rule.

Submit the form empty. Your browser will block submission, move focus, and expose the missing required value using its native behavior.

Quick test

Check before shipping.

  1. Can you tell which fields are required without relying on color or symbols?
  2. Does every required native input have the required attribute?
  3. Are format rules visible before an error occurs?
  4. With a screen reader, is the required state announced when focus reaches the field?