• Success Criterion 3.3.1
  • Conformance level A

Form Submission With No Way to Identify What Went Wrong

3.3.1 — Error Identification

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Submitting the event form with a missing title turns the field's border red, but no text message says which field failed or why, and screen reader users hear no announcement at all.

Example 

function onSave() {
  if (!titleInput.value.trim()) {
    titleInput.style.borderColor = 'red';
  }
}

Why it matters

A screen reader user who submits the form hears no error and no announcement, so they close the app believing the event saved and miss the meeting.

How to test

Submit a form with invalid data and check whether ANY error identification appears — visual, textual, or announced: absence of all three fails.

How to fix

Tie the message to the field with aria-describedby and move focus to it so both sighted and screen reader users land on the fix.

function onSave() {
  if (!titleInput.value.trim()) {
    titleInput.setAttribute('aria-invalid', 'true');
    titleInput.setAttribute('aria-describedby', 'title-error');
    errorText.hidden = false;
    errorText.textContent = 'Enter an event title before saving.';
    titleInput.focus();
  }
}

Outcome

The organizer hears exactly what to fix and gets the event saved on the next attempt.

Who is affected

Screen reader users and colorblind users who can't perceive the red outline as a warning signal.

Learn more

Related scenarios