Доступные иконки: имя действия, декоративный SVG и проверка
Обновлено .
Сначала определите роль иконки. Если она повторяет подпись, её можно скрыть от программы чтения с экрана. Если это единственное содержимое кнопки или ссылки, управляющему элементу нужно доступное имя. Если изображение сообщает самостоятельный факт, его нужно описать.
Три разных случая
- Значок рядом с текстом «Поиск»: текст уже сообщает назначение. Для SVG используйте aria-hidden="true"; для декоративного img — пустой alt="".
- Кнопка только с лупой: задайте кнопке aria-label="Поиск" либо видимую подпись. Название должно описывать действие, а не геометрию «круг с палочкой».
- Значок статуса: напишите рядом «Документ сохранён» или другую конкретную информацию. Не полагайтесь только на цвет галочки.
Самостоятельное изображение
Ниже статичная схема успешного завершения. У SVG есть роль изображения и имя через title. Идентификатор должен быть уникальным, если пример повторяется на странице.
<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="saved-title" width="32" height="32" viewBox="0 0 24 24"><title id="saved-title">Документ сохранён</title><path d="m4 12 5 5 11-11" fill="none" stroke="currentColor" stroke-width="2"/></svg>Это изображение, не кнопка: Tab не должен останавливаться на нём. Если оно должно запускать действие, нужен настоящий button с обработчиком в вашем приложении. Добавление role="button" к картинке само по себе не реализует клавиатурное управление.
Чек-лист для существующего интерфейса
- Прочитайте название действия без картинки: понятно ли, что произойдёт?
- Проверьте дерево доступности в инструментах браузера: роль и имя соответствуют назначению, подпись не дублируется дважды.
- Пройдите элементы клавишей Tab. У интерактивного элемента виден фокус; порядок соответствует чтению.
- Проверьте выбранную программу чтения с экрана: фактическое произношение может зависеть от сочетания браузера и технологии.
- Сделайте чёрно-белый просмотр: важные статусы остаются понятны по тексту.
Что не решает сама иконка
Узнаваемый знак не гарантирует доступность всего интерфейса. Увеличение картинки не исправит отсутствующее имя, а aria-label не исправит слишком маленькую область нажатия. Проверяйте эти свойства отдельно. Для неизвестной аудитории видимая подпись обычно полезнее попытки придумать универсальный символ.
Источники и проверка
По теме: Иконочный шрифт или SVG: выбор и пример внедрения · Стили иконок для сайта: как выбрать единый набор.