Дизайн — статьи о сайтах
На сайте оператора связи много изображений, и часть из них несёт данные: скорость, объём трафика, зону покрытия, шаги настройки роутера. Человек с программой экранного чтения (NVDA, JAWS, VoiceOver, TalkBack) вместо картинки слышит текст из атрибута alt, имя файла или ничего. Ниже разберём, что писать в описаниях и где их лучше оставить пустыми.
Три вопроса к каждой картинке на странице
Прежде чем писать alt, решите, зачем изображение нужно на странице:
- Оно несёт информацию, которой нет рядом в тексте? Тогда нужно описание сути.
- Оно работает как ссылка или кнопка? Тогда alt описывает действие или адрес перехода, а не внешний вид.
- Это украшение или дубль соседнего текста? Тогда ставьте пустой alt="".
Важно именно пустое значение, а не отсутствие атрибута. Без alt программа чтения может зачитать имя файла вроде «banner_final_2.png», и пользователь потратит время на мусор.
Иконки в карточке тарифа: пример разметки
Возьмём условную карточку «Домашний 300». В ней три иконки с подписями: «300 Мбит/с», «120 каналов», «Роутер в аренду». Иконки дублируют видимый текст, поэтому описывать их не нужно:
<img src="speed.svg" alt=""> 300 Мбит/с
Если написать alt="иконка скорости", слушатель услышит и иконку, и «300 Мбит/с». Для набора из десятка тарифов это превращается в шум.
Другое дело, когда значок стоит без подписи, например «Без абонентской платы». Тогда у него должен быть alt с этим смыслом. Ещё лучше вынести фразу в видимый текст: она нужна и тем, кто не понял значок.
Баннеры акций с текстом на картинке
Если условия акции нарисованы в графике, программа чтения их не прочитает, а пользователь с увеличением экрана получит размытый мелкий шрифт. Работает такой подход:
- Главное предложение дублируйте в alt: «Акция: второй месяц интернета бесплатно при подключении онлайн» (формулировка условная).
- Мелкие условия, сроки и ограничения размещайте обычным HTML-текстом под баннером.
- Если баннер — ссылка, добавьте цель перехода: «…, подробности об акции».
- В слайдере с автопрокруткой сделайте кнопку паузы. Иначе описание сменится раньше, чем его дочитают.
Карты покрытия, схемы и скриншоты инструкций
Карту покрытия нельзя полностью пересказать в alt. Дайте короткое описание вроде «Карта покрытия сети по городу» и рядом текстовую альтернативу: поиск по адресу и список районов с доступными типами подключения. Не пишите в alt обобщений вроде «связь везде»: описание должно соответствовать данным.
В инструкциях по настройке роутера или eSIM шаги ведите нумерованным списком, чтобы действие было понятно без картинки. Alt у скриншота коротко называет, что на экране: «Настройки: раздел «Мобильная сеть»». QR-код для оплаты тоже нужен с alt «QR-код для оплаты счёта», а реквизиты или ссылку для оплаты без камеры дайте текстом рядом.
Каталог устройств, логотипы и шапка сайта
- Фото роутера или смартфона: название модели и то, что важно для выбора, например «Wi-Fi роутер Model X, вид спереди». Цвет указывайте, если он влияет на выбор. Слово «изображение» в начале не нужно, программа и так сообщает, что это картинка.
- Логотипы способов оплаты: alt равен названию («Visa», «Мир»). Если рядом есть подпись, ставьте пустой alt.
- Логотип в шапке — ссылка на главную, поэтому alt: «Название оператора, на главную».
- SVG-иконки с смыслом получают role="img" и aria-label, декоративные скрываются через aria-hidden="true".
Проверочный список перед публикацией страницы
- У каждого img есть атрибут alt, пустой или заполненный.
- Иконки рядом с видимым текстом имеют alt="".
- Картинки-ссылки описывают, куда ведут.
- Цены, объёмы трафика, сроки и условия акций дублируются обычным текстом.
- У карты покрытия, схем и QR-кодов есть текстовая альтернатива.
- В alt нет имён файлов, слов «картинка» и «фото» в начале, повторов заголовка.
- Страница проходит проверку: отключите загрузку изображений и убедитесь, что тарифы и условия остались понятными.
- Пройдите страницу с бесплатной программой NVDA или встроенным VoiceOver и послушайте карточки тарифов.
Правила для описаний лучше зафиксировать в техническом задании и в инструкции для контент-менеджеров: тогда новые баннеры и акции не будут разрушать аккуратную разметку.
