• Success Criterion 3.3.1
  • Conformance level A

Generic ‘There Were Errors’ Message With No Field Named

3.3.1 — Error Identification

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Generic "There were errors" with no identification of which fields.

Example 

function onUpdateOrder() {
  if (!addressValid || !instructionsValid) {
    banner.textContent = 'There were errors. Please try again.';
    banner.hidden = false;
  }
}

Why it matters

A customer trying to fix a wrong delivery address has no way to know which of the two fields failed, so the order stays stuck mid-delivery.

How to test

Submit invalid data: if a generic 'There were errors' message appears without identifying which field(s), it fails.

How to fix

List each failing field by name and reason, never a single unspecific banner.

function onUpdateOrder() {
  const errors = [];
  if (!addressValid) errors.push('Delivery address is missing an apartment or unit number.');
  if (!instructionsValid) errors.push('Delivery instructions exceed 200 characters.');
  if (errors.length) {
    banner.innerHTML = errors.map(e => `<li>${e}</li>`).join('');
    banner.setAttribute('role', 'alert');
  }
}

Outcome

The customer corrects the apartment number in one pass and the driver gets the right address.

Who is affected

Users with cognitive or learning disabilities, and screen reader users, who cannot scan the whole form visually to guess which field is wrong.

Learn more

Related scenarios