Accessible Forms

Prerequisites

Before you start:

Learners should understand:

• basic form elements
• labels and inputs
• buttons
• simple CSS
• keyboard testing

Core explanation

Forms need clear relationships between:

• labels and inputs
• instructions and fields
• error messages and fields
• grouped questions and their options
• submit buttons and form purpose

The most important habit is simple:

Every form control needs a clear label.

Labels

Best practice:

<label for="name">Name</label>
<input id="name" name="name" type="text">

The for attribute on the label matches the id on the input.

This gives users a visible label, helps assistive technology identify the field, and lets users click the label to focus the input.

Required fields

Do not rely only on colour or an asterisk with no explanation.

<p class="form-note">Fields marked with * are required.</p>

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

You can also include the word “required” directly in the label:

<label for="email">Email address <span>(required)</span></label>

Help text

Use help text when users need extra guidance.

<label for="password">Password</label>
<p id="password-help">Use at least 12 characters.</p>
<input 
  id="password" 
  name="password" 
  type="password" 
  aria-describedby="password-help"
>

aria-describedby connects the help text to the input.

Error messages

A useful error message should:

• identify the field
• explain the problem
• suggest how to fix it

Less helpful:

<p class="error">Invalid</p>

Better:

<p id="email-error" class="error">Enter an email address in the format name@example.com.</p>

Connected input:

<input 
  id="email" 
  name="email" 
  type="email" 
  required 
  aria-describedby="email-error"
  aria-invalid="true"
>

Grouped controls

For related radio buttons or checkboxes, use fieldset and legend.

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact-method" value="email">
    Email
  </label>

  <label>
    <input type="radio" name="contact-method" value="phone">
    Phone
  </label>
</fieldset>

The legend gives the group a label.

Starter code

<form class="contact-form">
  <div>
    <input type="text" placeholder="Name">
  </div>

  <div>
    <input type="email" placeholder="Email">
  </div>

  <div>
    <textarea placeholder="Message"></textarea>
  </div>

  <div>
    <p>Contact preference</p>
    <input type="radio" name="contact"> Email
    <input type="radio" name="contact"> Phone
  </div>

  <button>Send</button>
</form>

Improved code

<form class="contact-form" action="/contact" method="post">
  <p class="form-note">Fields marked with * are required.</p>

  <div class="form-field">
    <label for="name">Name *</label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </div>

  <div class="form-field">
    <label for="email">Email address *</label>
    <p id="email-help" class="field-help">Use the address you would like us to reply to.</p>
    <input 
      id="email" 
      name="email" 
      type="email" 
      autocomplete="email" 
      aria-describedby="email-help"
      required
    >
  </div>

  <div class="form-field">
    <label for="message">Message *</label>
    <textarea id="message" name="message" rows="6" required></textarea>
  </div>

  <fieldset>
    <legend>Preferred contact method</legend>

    <label>
      <input type="radio" name="contact-method" value="email">
      Email
    </label>

    <label>
      <input type="radio" name="contact-method" value="phone">
      Phone
    </label>
  </fieldset>

  <button type="submit">Send message</button>
</form>

Supporting CSS

.contact-form {
  max-width: 42rem;
}

.form-field {
  margin-bottom: 1rem;
}

label,
legend {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

input,
textarea,
select {
  width: 100%;
  max-width: 100%;
  font: inherit;
  padding: 0.65rem;
  border: 2px solid #737373;
  border-radius: 0.35rem;
}

fieldset {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 2px solid #d4d4d4;
}

fieldset label {
  font-weight: 400;
}

.field-help,
.form-note {
  color: #404040;
}

.error {
  color: #991b1b;
  font-weight: 700;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

How and why this improves the form

• Each field has a visible label.
• Each label is programmatically connected to the matching input.
• Required fields are explained.
• The email field has helpful instructions.
• Radio buttons are grouped with fieldset and legend.
• The submit button explains the action.
• Autocomplete hints support easier form completion.
• Keyboard users can move through the form predictably.

Error state example

<div class="form-field">
  <label for="email">Email address *</label>
  <p id="email-help" class="field-help">Use the address you would like us to reply to.</p>
  <p id="email-error" class="error">Enter an email address in the format name@example.com.</p>
  <input 
    id="email" 
    name="email" 
    type="email" 
    autocomplete="email" 
    aria-describedby="email-help email-error"
    aria-invalid="true"
    required
  >
</div>