Дизайн — статьи о сайтах
На сайте хозяйства картинки часто несут информацию: фото партии зерна, схема проезда к складу, скан сертификата, прайс в виде изображения. Если человек пользуется программой экранного чтения, отключил загрузку картинок или открыл сайт с плохой связью, вместо изображения он получает только его текстовое описание, то есть атрибут alt. От того, что в нём написано, зависит, поймёт ли посетитель страницу.
Что именно читает посетитель вместо картинки
Программа экранного чтения произносит текст из alt, когда доходит до изображения. Если атрибута нет, многие программы зачитывают имя файла, например «IMG underscore 4521 точка jpg». Если в alt стоит набор слов вроде «купить зерно оптом цена», слушать это неприятно, а пользы никакой. Тот же текст показывается в браузере, когда картинка не загрузилась. Для сайта, который открывают с телефона в поле или на выезде, это вполне обычная ситуация.
Какие изображения на сайте хозяйства важны по смыслу
Прежде чем писать подписи, разделите картинки на три группы:
- Информационные. Фото продукции с видимой маркировкой, скан сертификата или декларации, схема расположения полей и складов, таблица в виде картинки. Описание обязательно, и оно должно передавать суть.
- Иллюстративные. Пейзаж, комбайн в поле, общий план фермы. Достаточно короткой фразы о том, что на снимке, если это связано с текстом рядом.
- Декоративные. Фоновые узоры, разделители, повторяющиеся колоски в оформлении. Для них ставят пустой alt (alt=""), чтобы программа чтения их пропускала.
Как сформулировать описание
Ориентируйтесь на вопрос: что я сказал бы по телефону человеку, который не видит этого снимка, но читает ту же страницу? Из этого следуют несколько правил.
- Не начинайте со слов «фото» и «изображение»: программа сама сообщает, что это картинка.
- Пишите то, что важно для контекста: не «трактор», а «Трактор с боронованием на поле озимой пшеницы».
- Не повторяйте дословно подпись или заголовок рядом: человек услышит одно и то же дважды.
- Не вставляйте ключевые слова ради поиска. Описание пишется для людей, а гарантий позиций оно не даёт.
- Обычно хватает одной фразы. Если нужно больше, вынесите пояснение в обычный текст на странице.
Условный пример: страница «Семенной картофель»
Представим вымышленное хозяйство и страницу с тремя изображениями. Это учебный фрагмент, а не описание реального проекта.
- Фото клубней сорта в мешке. Слабо: «картофель». Лучше: «Клубни картофеля сорта Гала в сетчатом мешке по 30 кг, на бирке виден номер партии».
- Скан сертификата на семена. Слабо: «сертификат». Лучше: «Сертификат на семенной картофель, партия 12, действует до 30 ноября», а полные данные дайте текстом рядом.
- Схема подъезда к складу. Слабо: «схема». Лучше: «Схема проезда: поворот с трассы у заправки, 2 км по грунтовой дороге, склад справа». Адрес и ориентиры продублируйте обычным текстом.
Номера, даты и названия сортов здесь придуманы для примера. На своём сайте берите данные из реальных документов.
Прайсы, сертификаты и схемы: когда alt недостаточно
Если на картинке много данных, например прайс-лист с ценами на зерно, график урожайности или таблица сортов, в alt всё не уместить. Вынесите содержание в обычный текст или HTML-таблицу под изображением. Такую таблицу можно скопировать, увеличить в браузере, она читается программой и не расплывается на телефоне. Картинка при этом остаётся как дополнение.
То же относится к баннерам с телефоном и временем работы пункта приёма. Если важные сведения есть только внутри изображения, часть посетителей их не получит. Дублируйте их текстом в самой странице.
Если изображение служит ссылкой, например логотип ведёт на главную или фото продукта ведёт в карточку, alt должен говорить о назначении ссылки: «Главная страница, хозяйство «Заречное»» или «Карточка: молоко цельное».
Проверочный список перед публикацией
- У каждого изображения на странице есть атрибут alt, пусть даже пустой для декора.
- Информационные картинки описаны по смыслу, а не названием файла или набором ключевых слов.
- В описаниях нет слов «фото», «картинка», «изображение» в начале.
- Цены, сроки, номера документов и адреса из изображений продублированы обычным текстом.
- Описания ссылок-картинок называют, куда ведёт ссылка.
- Описание не повторяет подпись рядом дословно.
- Страницу проверили с отключёнными картинками: понятно ли, о чём она?
- Ответственного за новые фото предупредили, что alt нужно заполнять при каждой загрузке в админке.
Последний пункт на практике важнее всего: подписи нужны не один раз при запуске, а с каждой новостью, каждым новым фото урожая или техники. Закрепите правило за тем, кто наполняет сайт, и проверяйте его раз в квартал.
