Скрытие декоративных значков с помощью aria-hidden
Не допускайте декоративные элементы в дерево доступности.
«Скрытие декоративных значков с помощью aria-hidden» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Some Icons Say Nothing
A little flourish next to a label adds nothing for a screen reader user. Announcing it just adds noise they have to wade through. 🔇
The Word Decorative
An icon is decorative when removing it would not change what the user understands. The nearby text already carries the meaning.
Hide It From the Tree
Set aria-hidden="true" on a decorative icon to pull it out of the accessibility tree so screen readers skip it entirely.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>It Hides Children Too
One aria-hidden="true" on a wrapper hides the element and everything inside it, so you mark the container, not each path.
Empty alt Does the Same for img
If the decorative icon is an <img>, give it an empty alt instead. An empty alt tells screen readers to skip the image.
<img src="sparkle.png" alt="" />Never Hide Visible Content
The golden rule: do not put aria-hidden on anything a sighted user relies on. You would erase real content for some people.
Never Hide Focusable Things
Putting aria-hidden on a focusable element creates a ghost: keyboard users land on a control screen readers refuse to announce.
Pair It With focusable false
For decorative inline SVGs, add focusable="false" alongside aria-hidden so no browser sneaks it into the tab order.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Redundant Icons Are Decorative
A trash icon beside the word Delete is redundant. Hide the icon and let the visible text do the talking for everyone.
Watch for the Lone Icon
Careful: an icon with no nearby text is usually not decorative. Hiding it would leave the control silent and unnamed.
Confirm It Is Gone
In the accessibility inspector, a properly hidden icon simply vanishes from the tree. That empty spot is exactly what you want.
Quick Check
A checkmark icon sits right next to the visible word Complete. What should you do with the icon?
Recap: Hide the Noise
Decorative icons get aria-hidden="true" (or empty alt) and focusable false, never on focusable or unique content. Less noise, clearer pages. 🎯
Часто задаваемые вопросы
Урок «Скрытие декоративных значков с помощью aria-hidden» бесплатный?
Да — полный текст урока «Скрытие декоративных значков с помощью aria-hidden» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Скрытие декоративных значков с помощью aria-hidden»?
Не допускайте декоративные элементы в дерево доступности. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Скрытие декоративных значков с помощью aria-hidden»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Встроенный SVG: роль img и заголовок
- Скрытие декоративных значков с помощью aria-hidden
- Кнопки со значками, у которых всё ещё есть имя
- Шрифты значков и их проблемы с доступностью