Как подписывать изображения для доступности на сайте компании по обслуживанию лифтов

Посетитель сайта лифтовой компании часто приходит не изучать услуги, а решить задачу: найти телефон диспетчера, понять, как заключить договор обслуживания, проверить, есть ли у компании допуски. Если часть информации передана только картинкой, например телефон на баннере или реквизиты на скане, то человек, который не видит изображение, эти данные не получит. Речь о незрячих пользователях, людях с сильно сниженным зрением, а также о тех, у кого картинки не загрузились на медленном мобильном соединении. Альтернативный текст (атрибут alt) решает эту проблему, но только если написан осмысленно.

Что должен делать alt на сайте лифтовой компании

Альтернативный текст заменяет изображение там, где его нельзя увидеть. Программа экранного доступа зачитывает его вслух, а браузер показывает на месте картинки, если она не загрузилась. Поэтому нужно спрашивать себя не «что нарисовано», а «какую задачу эта картинка выполняет на странице». Фото мастера у распределительного щита может быть просто иллюстрацией, а может подтверждать, что вы выполняете работы собственными силами. От этого зависит и текст.

Какие изображения встречаются и что для них писать

• Фотографии работ (кабина, шахта, машинное помещение, станция управления). Опишите действие и предмет: «Электромеханик проверяет работу дверей кабины». Не нужно перечислять цвет стен и марку кнопок, если это не важно для смысла.
• Иконки рядом с текстом (телефон, часы, адрес). Если рядом есть подпись, ставьте пустой alt="", чтобы программа не зачитывала лишнее.
• Иконка или кнопка без подписи (например, значок телефона, ведущий на звонок). Alt обязателен и описывает действие: «Позвонить диспетчеру».
• Сканы лицензий, свидетельств, договоров-образцов. Alt коротко называет документ, а все важные данные (название, номер, срок действия) лучше дать обычным текстом рядом.
• Схемы (порядок вызова аварийной службы, график плановых осмотров). Короткий alt говорит, что это за схема, а полное содержание выносится в текст страницы.
• Логотипы партнёров и производителей. Если логотип ссылка, alt описывает назначение, иначе достаточно названия компании.
• Чисто декоративные элементы (разделители, фоновые узоры): пустой alt.

Пример фрагмента страницы «Обслуживание лифтов в жилых домах»

Условный блок страницы: фото, телефон диспетчера и скан документа. Название компании и номера здесь выдуманы для примера.

<img src="door-check.jpg"
     alt="Электромеханик проверяет работу дверей кабины">

<p><img src="phone-icon.png" alt="">
   Диспетчер: <a href="tel:+78120000000">+7 (812) 000-00-00</a>, круглосуточно</p>

<img src="permit-scan.jpg"
     alt="Скан свидетельства о допуске к работам, первая страница">
<p>Свидетельство № 000, действует до 01.01.2020.</p>

Обратите внимание: телефон написан текстом и оформлен ссылкой, а иконка только украшает. Данные документа продублированы под сканом, их можно скопировать и найти на странице. Фото описывает действие, а не повторяет слова «фото лифта».

Типичные ошибки в подписях

• «Картинка», «фото», «IMG_0412.jpg». Слова «изображение» и «фото» программа и так озвучивает, а имя файла ничего не сообщает.
• Набор ключевых слов: «лифт ремонт обслуживание лифтов недорого». Такой текст неприятно слушать, и он не помогает понять картинку. Пишите нормальной фразой.
• Телефон или акция только на баннере. Если без картинки не обойтись, весь текст баннера повторите в alt, а лучше добавьте его в обычный текст страницы.
• Один и тот же alt у всех фото в галерее выполненных объектов. Различайте их по существу: что за работа, какое оборудование.
• Отсутствие атрибута вместо пустого значения. Без alt часть программ зачитывает адрес файла.

Как быть со схемами и сложными изображениями

Если на схеме показан порядок действий при остановке кабины или состав работ при ежемесячном осмотре, в alt не уместить всё содержание. Сделайте так: в alt напишите «Схема порядка вызова аварийной службы, описание ниже», а под схемой дайте нумерованный список тех же шагов. Тогда информацией смогут воспользоваться все, а список ещё и удобно читать с телефона. Формулировки инструкций для жильцов согласуйте со специалистами вашей компании: задача сайта передать их точно, а не придумывать самим.

Короткий список проверки перед публикацией

• У каждого изображения в разметке есть атрибут alt, даже если он пустой.
• Декоративные картинки и иконки с подписью рядом имеют alt="".
• Телефон диспетчера, адрес и график работы есть в тексте, а не только на картинке.
• Для сканов документов ключевые данные продублированы текстом.
• Кнопки и ссылки-картинки описывают действие («Позвонить диспетчеру»).
• Подписи содержат смысл, без слов «картинка» и «фото» и без перечня ключевых слов.
• У сложных схем есть текстовая версия на странице.
• Страница открыта с отключённой загрузкой изображений, и всё важное по-прежнему понятно.

Последний пункт самый простой тест: если без картинок страница остаётся полезной для человека, который пришёл за договором обслуживания или номером диспетчера, подписи составлены правильно.

Все статьи блога