- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Form Submission With No Way to Identify What Went Wrong
- Form Errors Marked Only by a Red Border, With No Text
- Generic ‘There Were Errors’ Message With No Field Named
- Error Text That’s Visible but Never Announced to Screen Readers
- Error Summary That Names Fields Too Vaguely to Identify Them
- Error Toast That Disappears Before It Can Be Read