- 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
A QA pass on a government tax-filing portal turns this up: icon fonts (<i class="fa fa-trash">) conveying meaning with no text alternative and not hidden when redundant.
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. On a government tax-filing portal, that means they can't tell what the image or video is showing.
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
Pair meaningful icon fonts with a text alternative (aria-label or visually hidden text) — aria-hidden (code hiding content from screen readers) them when redundant.
Outcome
With the fix in place on a government tax-filing portal, they hear or read what the media conveys.
Who is affected
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Not Hidden From Screen Reader Users
- Decorative Image Given Alt Text Instead of Being Marked Silent