Шрифты значков и их проблемы с доступностью
Почему шрифты с глифами часто читаются как набор бессмысленных символов.
«Шрифты значков и их проблемы с доступностью» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
What an Icon Font Is
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.
The Garbage Character Problem
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.
Fonts Can Fail to Load
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.
CSS Content Is Not Real Text
Icon fonts often inject glyphs via CSS pseudo-elements. That generated content is fragile and easy for assistive tech to misread.
i.icon-star::before {
content: "\e801";
}Hide Decorative Icon Glyphs
If an icon font glyph is decorative, wrap it and add aria-hidden="true" so the meaningless character never reaches the accessibility tree.
<span class="icon-star" aria-hidden="true"></span>Meaningful Glyphs Need Text
When the glyph carries meaning, pair the hidden icon with real visually hidden text so the meaning survives a font failure.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>User Stylesheets Break Them
Some users override fonts for dyslexia or low vision. Their font replaces yours, and every icon font glyph turns into a plain letter.
Translation Tools Mangle Them
Browser translation can swap the glyph characters for other text, scrambling your icons because they are technically letters, not images.
Why SVG Wins
Inline SVG sidesteps all of this: it is a real image, survives font swaps and translation, and takes role and label cleanly.
Migrating Off Icon Fonts
Modern advice is to retire icon fonts in favor of inline SVG or SVG sprites. You gain crisp rendering and far fewer accessibility traps.
Test With the Font Disabled
Block the font in devtools and reload. If you see stray characters instead of icons, your fallbacks and labels need work.
Quick Check
You inherit a page using an icon font for a meaningful star rating. What is the safest accessibility fix?
Recap: Treat Icon Fonts With Care
Icon font glyphs are fragile text: hide decorative ones with aria-hidden, back meaningful ones with real text, and prefer SVG. 🎯
Часто задаваемые вопросы
Урок «Шрифты значков и их проблемы с доступностью» бесплатный?
Да — полный текст урока «Шрифты значков и их проблемы с доступностью» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Шрифты значков и их проблемы с доступностью»?
Почему шрифты с глифами часто читаются как набор бессмысленных символов. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Шрифты значков и их проблемы с доступностью»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Встроенный SVG: роль img и заголовок
- Скрытие декоративных значков с помощью aria-hidden
- Кнопки со значками, у которых всё ещё есть имя
- Шрифты значков и их проблемы с доступностью