• Success Criterion 3.3.1
  • Conformance level A

Form That Fails Silently With No Error Message at All

3.3.1 — Error Identification

Scenario

Setting

A weather app's forecast screen

What’s wrong

Submission fails with no error message at all (page reloads silently / button does nothing).

Example

async function addLocation(zip) {
  const res = await fetch('/api/locations?zip=' + zip);
  if (!res.ok) {
    return; // fails silently, page stays exactly as it was
  }
  renderLocation(await res.json());
}

Why it matters

Someone who types an invalid ZIP code gets no feedback at all, so they assume the city isn't supported or the app is broken and abandon it.

How to test

Submit the form with missing/invalid data: if the page reloads silently or nothing visibly happens, it fails.

How to fix

Every failed request needs a visible, announced message, never a silent no-op.

async function addLocation(zip) {
  const res = await fetch('/api/locations?zip=' + zip);
  if (!res.ok) {
    status.textContent = 'We could not find that ZIP code. Enter a 5-digit US ZIP code.';
    status.setAttribute('role', 'alert');
    return;
  }
  renderLocation(await res.json());
}

Outcome

A traveler retypes the ZIP code correctly and sees their destination's forecast within seconds.

Who is affected

Screen reader users and people with cognitive disabilities who need explicit confirmation that an action succeeded or failed.

Learn more