Кнопка с иконкой и понятным именем
Кнопке с графическим значком нужно доступное имя, объясняющее действие независимо от узнаваемости картинки.
Назначение
Кнопке с графическим значком нужно доступное имя, объясняющее действие независимо от узнаваемости картинки.
Как это работает
Если видимый текст возможен, его удобно оставить внутри button. Чисто декоративный значок скрывают от вспомогательных технологий через aria-hidden, чтобы он не повторял название действия.
Пример
<style>button{display:inline-flex;align-items:center;gap:.5rem;padding:10px 16px;font:inherit}</style>
<button type="button"><span aria-hidden="true">↓</span><span>Показать пример</span></button>Что должно получиться
Кнопка имеет имя «Показать пример», а стрелка остаётся декоративной. Пример не добавляет обработчик показа: он разбирает разметку, имя и выравнивание контрола.
Граница применения и частая ошибка
Не используйте символ × без названия для важной кнопки закрытия. Атрибут title не является надёжной единственной заменой видимой подписи и доступного имени.
Самостоятельная проверка
Просмотрите доступное имя кнопки в инструментах браузера. Пройдите её клавиатурой и убедитесь, что в имени нет лишнего описания декоративного символа.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.