Form Accessibility Compliance for Ecommerce

Forms are where customers check out and provide information. Inaccessible forms are lost sales. Learn how to fix form accessibility and stay WCAG 2.1 AA compliant.

Audit Your Store's Forms

Why Form Accessibility Matters

A screen reader user cannot fill out your checkout form if form fields have no labels. A keyboard-only user cannot navigate a form with no logical tab order. Broken forms mean lost customers and accessibility lawsuits.

In ecommerce, checkout forms are the most critical—they directly impact revenue.

Rule 1: Every Form Field Needs a Label

❌ Bad: No label

<input type="email" placeholder="Enter your email">

A screen reader says nothing. Placeholder text disappears when the user starts typing.

✓ Good: Proper label

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

The label is visible, associated with the input, and announced by screen readers.

Rule 2: Labels Must Be Visible

Do NOT hide labels with CSS. Users need to see what a field asks for.

❌ Bad: Hidden label

<label for="password" style="display: none;">Password</label>
<input type="password" id="password" placeholder="Password">

✓ Good: Visible label

<label for="password">Password</label>
<input type="password" id="password" name="password">

Rule 3: Use aria-label for Icon-Only Buttons

If a button only shows an icon (e.g., a close button with just an X), use aria-label to describe it.

❌ Bad: Icon with no description

<button>×</button>

A screen reader says "button" — users do not know what it does.

✓ Good: Labeled icon button

<button aria-label="Close dialog">×</button>

Rule 4: Group Related Checkboxes and Radio Buttons

Use <fieldset> and <legend> to group related form inputs.

❌ Bad: No grouping

<label><input type="radio" name="shipping"> Standard (5–7 days)</label>
<label><input type="radio" name="shipping"> Express (2–3 days)</label>

✓ Good: Grouped with legend

<fieldset>
  <legend>Shipping method</legend>
  <label><input type="radio" name="shipping"> Standard (5–7 days)</label>
  <label><input type="radio" name="shipping"> Express (2–3 days)</label>
</fieldset>

Rule 5: Mark Required Fields

Use aria-required="true" and required attribute so screen readers know a field is mandatory.

<label for="card">Card number</label>
<input type="text" id="card" name="card" required aria-required="true">

Rule 6: Clear Error Messages

When a form has an error, the message must be:

Visible: Displayed clearly on the page
Associated: Linked to the specific field (use aria-describedby)
Specific: Say what is wrong and how to fix it

❌ Bad: Generic error

<div style="color: red;">Invalid input</div>
<input type="email" name="email">

✓ Good: Specific, linked error

<label for="email">Email address</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<div id="email-error" style="color: red; margin-top: 4px;">
  Please enter a valid email address (e.g., user@example.com)
</div>

Test Your Forms

Scan Record audits your checkout and contact forms and identifies:

Fields without labels
Hidden or missing associations
Poor error messaging
Missing required field markers

Scan Your Store's Forms Now

Learn More

Full accessibility checklist →
Keyboard navigation guide →
Alt text checker →