← Back to Accessalyze

How to Make Forms Accessible

Forms are where most real-world ADA failures happen — and where litigation risk is highest, because barriers in forms prevent users from completing essential tasks like signing up, purchasing, or applying for services.

1. Every Input Must Have a Label

Every form control must have a programmatically associated label. Placeholder text does not count — it disappears when the user starts typing and has insufficient contrast.

<!-- BAD: no label -->
<input type="email" placeholder="Email address">

<!-- BAD: visual label not associated with input -->
<p>Email address</p>
<input type="email">

<!-- GOOD: explicit label with matching id/for -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email">

<!-- GOOD: label wraps input (implicit association) -->
<label>
  Email address
  <input type="email" name="email" autocomplete="email">
</label>

2. Don't Rely on Placeholder Alone

Placeholder text fails on three counts:

• Disappears when the user starts typing (no visible reminder of what's needed)
• Default placeholder color (#aaa) fails WCAG 1.4.3 contrast requirement
• Not consistently announced by all screen reader + browser combinations

Use placeholder only for examples/hints in addition to a proper label, never as a substitute.

3. Mark Required Fields Correctly

<!-- BAD: color alone marks required -->
<label style="color:red">Email</label>
<input type="email">

<!-- GOOD: text + aria-required -->
<label for="email">
  Email address <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span>
</label>
<input type="email" id="email" aria-required="true">

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

Also include a note before the form: "Fields marked with * are required" so the asterisk convention is explained.

4. Error Messages Must Be Associated With Fields

When validation fails, the error message must be programmatically linked to the input it describes.

<!-- BAD: error not associated with input -->
<p style="color:red">Please enter a valid email</p>
<input type="email" id="email">

<!-- GOOD: error linked via aria-describedby -->
<label for="email">Email address</label>
<input type="email" id="email"
       aria-describedby="email-error"
       aria-invalid="true">
<p id="email-error" role="alert">
  Please enter a valid email address (e.g. you@example.com)
</p>

5. Group Related Inputs With fieldset/legend

<!-- BAD: radio buttons without group label -->
<input type="radio" id="yes" name="subscribe" value="yes">
<label for="yes">Yes</label>
<input type="radio" id="no" name="subscribe" value="no">
<label for="no">No</label>

<!-- GOOD: fieldset + legend groups them -->
<fieldset>
  <legend>Subscribe to newsletter?</legend>
  <input type="radio" id="yes" name="subscribe" value="yes">
  <label for="yes">Yes</label>
  <input type="radio" id="no" name="subscribe" value="no">
  <label for="no">No</label>
</fieldset>

6. Autocomplete Attributes (WCAG 1.3.5)

Personal data fields must include standard HTML autocomplete values. This helps users with cognitive disabilities and password managers, and is required by WCAG 1.3.5.

<input type="text" autocomplete="given-name">
<input type="text" autocomplete="family-name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="postal-code">
<input type="password" autocomplete="current-password">

7. Focus Management After Form Submission

When a form is submitted and the page updates without a full reload, move focus to the confirmation message or error summary so screen reader users know what happened.

// After successful async form submission
const msg = document.getElementById('success-msg');
msg.removeAttribute('hidden');
msg.setAttribute('tabindex', '-1');
msg.focus(); // Screen reader reads the confirmation

// After validation errors appear
document.getElementById('error-summary').focus();

8. Session Timeouts

If a form session times out, the user must be warned at least 20 seconds before the timeout and given a way to extend it (WCAG 2.2.1). Many checkout forms fail this requirement silently.

← Back to Accessalyze