• Success Criterion 1.1.1
  • Conformance level A

Icon Font Used to Convey Meaning With No Text Backup

1.1.1 — Non-text Content

Scenario

Setting

A government tax-filing portal

What’s wrong

Icon fonts (<i class="fa fa-trash">) conveying meaning with no text alternative and not hidden when redundant.

Example 

<button><i class="fa fa-trash"></i></button>

Why it matters

A taxpayer using a screen reader on a delete button hears nothing, or a nonsense character name, and risks removing the wrong filing without warning.

How to test

Turn on a screen reader and tab to icon-font buttons (e.g., a trash-can icon for delete): if it announces only the ligature character or nothing, it fails.

How to fix

Hide the glyph and put its meaning in an aria-label. Icon fonts render as font glyphs, not images, so alt doesn't apply to them at all.

<button aria-label="Delete this filing"><i class="fa fa-trash" aria-hidden="true"></i></button>

Outcome

A taxpayer hears "delete this filing" before activating the button, and only removes what they intend to.

Who is affected

Screen reader users managing sensitive documents face real financial risk from an unlabeled destructive action.

Learn more

Related scenarios