Иконка без подписи: как сделать действие понятным

Иконка без подписи может выглядеть аккуратно, но действие остаётся неоднозначным. Корзина обычно узнаваема, а произвольный знак «уточнить» — нет. Для важных маршрутов дайте человеку понятное название и проверьте, что оно доступно не только при наведении.

В учебном примере на сайте студии стоит круглая иконка сообщения. Она открывает Telegram. Название «Написать в Telegram» точнее, чем «Связь» или «Нажмите». Если знак открывает форму на сайте, подпись должна описывать именно форму.

Сначала сформулируйте назначение без изображения. Если этого сделать трудно, вероятно, сама задача элемента не определена. Не используйте одну иконку для нескольких разных действий в соседних блоках.

1. Найдите кнопки и ссылки, в которых смысл передаёт только изображение.
2. Для основного обращения замените такой элемент кнопкой с текстом или добавьте рядом короткую подпись.
3. Проверьте ссылку: название и фактический результат должны совпадать.
4. Сохраните и опубликуйте страницу.
5. Попросите человека, который не видел макет, назвать действие до нажатия.

Если используете графическую ссылку Zero Block, заполните альтернативный текст по назначению. Для декоративной картинки внутри уже понятной текстовой кнопки повторение той же фразы может быть лишним. Проверяйте конкретную разметку, чтобы одно действие не озвучивалось дважды.

В T123 можно создать обычную ссылку с доступным названием. Символ ниже условный; вместо него можно поставить свою декоративную иконку.

aria-label задаёт название ссылки для вспомогательной технологии, а aria-hidden скрывает условный декоративный символ от озвучивания. Это пример собственного HTML, не способ автоматически исправить все иконки Tilda. Для большинства посетителей видимая подпись «Контакты» всё равно понятнее, поэтому оставляйте её там, где позволяет дизайн.

На телефоне подсказка при наведении не заменяет название. Проверьте обычное касание, область нажатия и расстояние до соседних элементов. На компьютере проверьте фокус клавиатурой и доступное название через скринридер или инструменты доступности браузера.

Иконка должна оставаться заметной на изображении и при смене фона. Для состояния «выбрано» добавьте понятный признак, если одного цвета недостаточно. Сложные кнопки закрытия, раскрытия и управления плеером проверяют также по соответствующему поведению.

• Человек не узнаёт действие: добавьте видимый текст.
• Скринридер читает имя файла: исправьте назначение альтернативного текста.
• Название повторяется: проверьте декоративную часть и текст ссылки.
• Иконка кликается только мышью: замените собственный несемантический элемент настоящей ссылкой или кнопкой.

Дополнительно разберите альтернативный текст и выбор кнопки и ссылки. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.