На сайте библиотеки изображений много: обложки в каталоге, сканы документов, афиши лекций, схемы залов. Посетитель со скринридером, с медленным интернетом или с отключённой загрузкой картинок получает о них только то, что написано в тексте-замене, атрибуте alt. Если его нет или он бессмысленный, часть информации просто пропадает. Ниже описано, какие решения стоит принять для сайта.
Сначала разделите изображения по задаче
Один шаблон подписи для всех картинок не работает. Полезно выделить четыре группы:
- информативные — фотографии фондов, здания, залов: они несут содержание;
- декоративные — фоновые узоры, разделители, повторяющие заголовок картинки: им нужен пустой alt (alt=""), чтобы скринридер их пропускал;
- функциональные — значок лупы в поиске, иконка «версия для печати»: alt описывает действие, а не рисунок;
- сложные — схемы, сканы с текстом, афиши, графики: коротким alt тут не обойтись.
Обложки в каталоге: когда alt нужен, а когда нет
В карточке книги рядом с обложкой обычно уже есть название и автор текстом. Если в alt повторить «Война и мир. Лев Толстой», диктор прочитает одно и то же дважды. В такой карточке обложке лучше поставить пустой alt.
Иначе, если обложка — единственное содержимое ссылки (например, лента «Новые поступления» без текстовых подписей), alt обязателен: «Лев Толстой, «Война и мир»». Иначе ссылка для диктора будет безымянной. Ориентир: подпись нужна там, где без картинки теряется информация или ссылка лишается названия.
Архивные фотографии и сканы: короткий alt и полное описание рядом
В краеведческих разделах картинка часто и есть содержание. Здесь работает связка из трёх элементов:
- alt в одну-две фразы о том, что видно;
- видимая подпись: год, источник, фонд, шифр хранения;
- для сканов с текстом — расшифровка или ссылка на текстовую версию.
Не начинайте alt со слов «изображение» и «фотография»: диктор сам сообщает, что это картинка. Описывайте то, что важно в контексте страницы. Для раздела о истории читальных залов важны столы и лампы, а не цвет рамки.
Афиши и баннеры с текстом внутри картинки
Частая ошибка: дата и время встречи есть только на макете афиши, а в тексте страницы их нет. Такую информацию не прочитает диктор, её нельзя скопировать и трудно увеличить на телефоне. Решение для сайта: все сведения (название, дата, время, зал, как записаться) дублируются в HTML-тексте. Тогда alt афиши может быть коротким: «Афиша лектория о истории города» — либо пустым, если афиша лишь иллюстрирует уже написанное.
Условный пример: страница лекции
Представим страницу мероприятия «Лекторий: улицы старого города». Подписи могли бы выглядеть так:
- афиша в начале страницы — alt: «Афиша лектория «Улицы старого города»»; дата, время и зал указаны в тексте под заголовком;
- архивная фотография набережной — alt: «Набережная с торговыми рядами и лодками у причала»; видимая подпись: «Из краеведческого фонда, 1930-е»;
- схема проезда к зданию — alt: «Схема: вход со двора, налево от арки», а те же сведения словами идут в абзаце «Как найти зал»;
- декоративная орнаментальная полоса — alt="";
- значок «Добавить в календарь» внутри кнопки — alt пустой, потому что рядом есть текст кнопки.
Как встроить подписи в работу редакции
Качество alt зависит не только от разработчиков, но и от того, как устроена система управления сайтом:
- сделайте поле описания видимым при загрузке файла и добавьте отметку «декоративное изображение», чтобы пустой alt был осознанным выбором, а не пропуском;
- в шаблоне каталога задайте правило для обложек: пустой alt, если рядом есть название;
- не подставляйте имя файла вроде IMG_2041.jpg как подпись по умолчанию;
- назначьте ответственного за проверку новых материалов и коротко опишите правила для сотрудников;
- при массовой загрузке оцифрованных фондов заложите время на описания или опишите хотя бы ключевые коллекции, а остальным добавьте общую подпись коллекции.
Проверочный список
- У каждого img атрибут alt есть (даже если пустой).
- Пустой alt стоит только у декоративных картинок и у тех, чьё содержание уже передано текстом рядом.
- Картинки-ссылки и кнопки имеют подпись, которая называет действие или адресат ссылки.
- В alt нет слов «картинка», «фото» и имён файлов.
- Вся важная информация с афиш и схем есть в тексте страницы.
- У сканов с текстом есть расшифровка или текстовая версия.
- Подпись читается понятно без картинки: попробуйте отключить загрузку изображений в браузере и пройти по странице.
- Выборочно проверьте страницу экранным диктором, например NVDA или VoiceOver.
