Дизайн — статьи о сайтах
На сайте хостинга картинки редко бывают просто украшением: скриншоты панели управления, схемы инфраструктуры, значки возле тарифов, фото серверного зала. Если изображение не видно, потому что человек слушает страницу через программу экранного доступа или у него не загрузились файлы, понять инструкцию или сравнить тарифы помогает только текстовая подпись. Разберём, как её писать.
Что делает атрибут alt и чего он не делает
Alt — это текстовая альтернатива в теге img. Её зачитывают программы вроде NVDA, JAWS или VoiceOver, и она показывается на месте картинки, когда файл не загрузился. Требование есть в WCAG 2.1, критерий 1.1.1 «Нетекстовое содержимое»: у изображения, которое несёт смысл, должен быть текстовый эквивалент. Alt должен заменять картинку по смыслу, а не перечислять, что нарисовано.
Какие изображения бывают на сайте хостинга и что писать в alt
- Информативные (скриншоты в инструкциях, графики, схемы): alt передаёт то, что читателю нужно с них узнать.
- Функциональные (логотип-ссылка, кнопка-картинка): alt описывает действие или адрес перехода, а не внешний вид.
- Декоративные (фоновые узоры, иконка рядом с подписью, которая её дублирует): пустой alt, то есть alt=''. Тогда программа чтения пропустит картинку.
- Сложные (инфографика, схема из десятка узлов): короткий alt и полное описание обычным текстом рядом.
Условный пример: фрагмент страницы тарифа
Допустим, на странице тарифа «Старт» есть значок, скриншот, фото и схема. Вот как могут выглядеть подписи:
<a href='/'><img src='logo.svg' alt='Название хостинга — на главную'></a>
<li><img src='backup.svg' alt=''> Резервные копии каждый день</li>
<p>Шаг 2. В разделе «Домены» нажмите «Добавить домен».</p>
<img src='domains.png' alt='Раздел «Домены» панели управления: справа вверху кнопка «Добавить домен»'>
<img src='scheme.png' alt='Схема: запрос посетителя проходит через балансировщик на один из трёх серверов. Описание ниже.'>Логотип в шапке — ссылка, поэтому в alt указан переход. Иконка рядом с текстом про копии ничего не добавляет, её alt пуст. Шаг инструкции написан текстом, а скриншот только подтверждает, где искать кнопку. У схемы короткий alt отсылает к текстовому описанию, которое нужно разместить под ней.
Как подписывать скриншоты инструкций
Скриншот не должен быть единственным носителем информации. Действие напишите в тексте шага, а alt используйте, чтобы показать, что и где на экране. Значения полей, команды и адреса серверов имён, которые видны на снимке, продублируйте обычным текстом: их можно будет скопировать, и они прочитаются программой. Не пересказывайте весь интерфейс, достаточно элементов, важных для шага.
Типичные ошибки в подписях
- Начинать с «изображение», «картинка», «фото»: программа и так сообщает, что это графика.
- Набивать alt словами вроде «хостинг дешёвый vps домен»: слушать такой набор неприятно, а пользы нет.
- Оставлять цены и условия только на баннере. Всё, что влияет на выбор тарифа, должно быть и в HTML-тексте.
- Ставить одинаковый alt разным картинкам или имя файла вроде IMG_2041.
- Писать оценки вместо описания: «надёжный дата-центр» на фото ничего не объясняет. Лучше: «Серверный зал: стойки с оборудованием в два ряда».
Чтобы это не зависело от памяти редактора, сделайте поле alt обязательным в админке сайта и добавьте к нему подсказку с правилами выше.
Проверочный список перед публикацией страницы
- У каждого img есть атрибут alt, пусть даже пустой для декоративных.
- Для ссылок и кнопок-картинок alt говорит, куда ведёт ссылка или что делает кнопка.
- Скриншоты дополнены шагами в тексте, а команды и значения можно скопировать.
- Цены, сроки и условия тарифов не существуют только внутри картинки.
- У схем и инфографики есть текстовое описание рядом.
- Alt не длиннее одного-двух предложений и не содержит слов «картинка» и «фото».
- Страница просмотрена с отключённой загрузкой изображений, и смысл сохранился.
- Ключевой сценарий (выбор тарифа, добавление домена) прослушан в NVDA или другом средстве чтения с экрана.
