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