アイコンフォントのアクセシビリティ上の落とし穴

An icon font maps characters to glyphs, so a letter renders as a heart or arrow. Handy for sizing, but a minefield for screen readers.

Many icon fonts hide glyphs in the private use area of Unicode. With the font off, a screen reader may read a random box or odd letter.

If the font file blocks or fails, the fallback glyph shows instead of your icon. Now users see a stray character where a clear icon should be.

Icon fonts often inject glyphs via CSS pseudo-elements. That generated content is fragile and easy for assistive tech to misread.

If an icon font glyph is decorative, wrap it and add aria-hidden="true" so the meaningless character never reaches the accessibility tree.

When the glyph carries meaning, pair the hidden icon with real visually hidden text so the meaning survives a font failure.

Some users override fonts for dyslexia or low vision. Their font replaces yours, and every icon font glyph turns into a plain letter.

Browser translation can swap the glyph characters for other text, scrambling your icons because they are technically letters, not images.

Inline SVG sidesteps all of this: it is a real image, survives font swaps and translation, and takes role and label cleanly.

Modern advice is to retire icon fonts in favor of inline SVG or SVG sprites. You gain crisp rendering and far fewer accessibility traps.

Block the font in devtools and reload. If you see stray characters instead of icons, your fallbacks and labels need work.

You inherit a page using an icon font for a meaningful star rating. What is the safest accessibility fix?

Icon font glyphs are fragile text: hide decorative ones with aria-hidden, back meaningful ones with real text, and prefer SVG. 🎯