• Success Criterion 3.3.1
  • Conformance level A

Inline Error Icon With No Accessible Text Explaining It

3.3.1 — Error Identification

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Inline validation icons (✗) with no accessible text describing the error.

Example 

<td class="price-cell">
  <input value="-5.00">
  <span class="icon-x" aria-hidden="true">X</span>
</td>
<!-- the X icon has no text alternative and isn't tied to the input -->

Why it matters

A seller reviewing 50 rows of inventory can't tell via screen reader which price is negative and rejected, so the bad price ships to the live store.

How to test

Submit invalid data: if the only error indicator is an icon (✗) with no accessible text describing what's wrong, it fails.

How to fix

Give the icon a paired text description, not just aria-hidden decoration, and tie it to its specific cell.

<td class="price-cell">
  <input value="-5.00" aria-describedby="price-row12-error" aria-invalid="true">
  <span id="price-row12-error" role="alert">Price cannot be negative.</span>
</td>

Outcome

The seller finds the exact row with the bad price and corrects it before publishing the catalog.

Who is affected

Screen reader users who can't see a small red X, and who get no announcement identifying which row or field failed.

Learn more

Related scenarios