Как подписывать изображения на сайте стоматологической клиники, чтобы их понимали все посетители

Посетитель со скринридером, человек с плохим зрением, пользователь на медленном мобильном соединении, у которого картинки не загрузились, — все они вместо изображения получают его текстовое описание. Если описания нет, они теряют часть информации. На сайте клиники это могут быть схема проезда, кнопка записи или скан лицензии. Ниже разберём, как подписывать картинки, и покажем это на условном примере.

Что именно читает программа вместо картинки

Для каждого изображения в HTML есть атрибут alt. Программа экранного доступа, например JAWS или NVDA, зачитывает его вслух. Если браузер не смог загрузить файл, на его месте показывается тот же текст. Если атрибута нет совсем, многие программы озвучивают имя файла, и человек слышит что-то вроде «IMG underscore 0457 точка jpg». Поэтому у каждого изображения атрибут должен быть. Для декоративных картинок он остаётся пустым, об этом ниже.

Четыре типа картинок и правило для каждого

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

Условный пример: страница врача

Допустим, на странице специалиста есть заголовок с именем, фото, кнопка записи и скан сертификата. Разметка может быть такой:

<h2>Врач-ортодонт Анна Петрова</h2>
<img src="petrova.jpg" alt="Портрет врача в рабочем кабинете">
<a href="/zapis/"><img src="btn.png" alt="Записаться на приём к врачу"></a>
<img src="cert.jpg" alt="Сертификат о повышении квалификации, скан">
<p>Сертификат: название курса, организация, год.</p>

Имя и должность уже есть в заголовке, поэтому в alt фото их повторять не нужно: человек со скринридером услышит одно и то же дважды. Кнопка названа по действию. Для сертификата реквизиты вынесены в обычный текст, который можно прочитать, скопировать и увеличить.

Фото «до и после», снимки и оборудование

Здесь легко скатиться в рекламные оценки. Alt должен говорить, что показано, а не оценивать результат: «Верхние передние зубы до лечения, вид спереди» и «Те же зубы после лечения». Формулировки об эффекте и показаниях относятся к содержанию страницы, их согласовывают с врачом и ответственным за публикацию. Вопросы о разрешении пациентов на публикацию фото тоже решаются вне разметки.

Рентгеновские снимки в статьях подписывайте нейтрально: «Панорамный снимок челюстей, иллюстрация к статье». Выводы по снимку в alt не пишите, их место в основном тексте. Фото аппаратов описывайте по назначению: «Кабинет с креслом и светильником».

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

• Пустые или формальные тексты: «картинка», «фото 1», имя файла.
• Набор ключевых слов вроде «лечение зубов недорого центр». Скринридер зачитает это целиком, а пользы человеку не будет.
• Слишком длинные описания. Ориентир: одна короткая фраза, около 100–120 знаков, остальное лучше вынести в текст страницы.
• Телефон, адрес или акция только на баннере-картинке. Всё важное должно быть и обычным текстом.
• Слова «изображение» и «фото» в начале каждой подписи: программа и так сообщает, что это картинка.

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

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

Как встроить это в работу с сайтом

Попросите разработчиков сделать поле alt в панели управления заметным и обязательным для заполнения при загрузке картинки. Тому, кто наполняет сайт, достаточно одной страницы памятки с четырьмя типами изображений. Для проверки откройте страницы с отключёнными картинками и один раз пройдите по ним бесплатным NVDA. Этого хватит, чтобы увидеть, где подписи отсутствуют или мешают.

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