• 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

The delete control is a button that only contains an icon-font glyph (<i class="fa fa-trash">). The glyph conveys "delete" visually, but the button has no accessible name and the glyph is not hidden from assistive technology, so a screen reader may hear nothing useful, or a private-use character, instead of "Delete this filing" (1.1.1; also fails 4.1.2 for a nameless control).

Watch on YouTube (captions available)

Example 

<button type="button">
  <i class="fa fa-trash"></i>
</button>
<!-- trash icon only; the button deletes the current tax filing -->

Why it matters

A taxpayer using a screen reader may activate the wrong control, or avoid the delete button entirely, because nothing clear says what it does. On a tax portal that can mean deleting the wrong filing.

How to test

Find buttons or links that show only an icon-font glyph (Font Awesome, Material Icons, and similar). In the browser's accessibility tree (DevTools), the control should have a non-empty name that states its purpose. Check that the glyph itself is marked aria-hidden="true" (or role="presentation") when its meaning is already on the control. Then tab to it with a screen reader: you should hear the purpose, such as "Delete this filing, button", not silence or a meaningless character.

How to fix

Give the control a short text alternative that says what it does (G94 / ARIA6): put aria-label="Delete this filing" on the <button>, and hide the icon-font glyph with aria-hidden="true" so assistive technology does not also announce the private-use character. Icon fonts are font glyphs, not <img> elements, so alt does not apply. Prefer visible text next to the icon when the UI allows ("Delete" plus a decorative glyph), and keep aria-hidden on the glyph. F26 (1.3.3) is related when meaning is conveyed only by shape with no text alternative at all.

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

Outcome

A taxpayer hears something like "Delete this filing, button" before activating it, and only removes what they intend to. Sighted users still see the trash icon.

Who is affected

Screen reader users, and people using text-to-speech or braille, who get no clear name for an icon-font-only control — especially destructive actions on sensitive documents.

Learn more

Related scenarios