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

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

Как решить, нужна ли картинке подпись

Задайте вопрос: что потеряет посетитель, если картинки не будет? Если ничего, потому что рядом те же сведения текстом, ставьте пустой атрибут alt="". Читалка пропустит такое изображение. Сам атрибут убирать нельзя: без него часть программ зачитывает имя файла вроде «IMG_0457.jpg».

Если картинка несёт информацию (имя человека, время, маршрут, название компании), подпись должна передавать эту информацию. Слова «фото» и «изображение» не нужны: программа сама сообщает, что перед пользователем графика.

Фотографии спикеров: имя и роль или пустой alt

В карточке спикера обычно есть имя и должность текстом. Тогда фото дублирует их, и alt остаётся пустым. Иначе читалка дважды произнесёт одно и то же.

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

Программа, схема зала, инфографика: где нужен текст рядом

Самая частая ошибка организаторов: расписание выложено одной картинкой. Для читалки это пустое место, а на телефоне мелкий текст нельзя нормально увеличить. Расписание лучше сделать текстовой таблицей или списком: время, зал, тема, имя докладчика. Картинку-афишу можно оставить, но тогда все её данные должны быть продублированы текстом на странице.

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

Логотипы партнёров и кнопки-картинки

Подпись логотипа зависит от его роли:

• логотип в списке партнёров без названия рядом: alt содержит название компании;
• логотип рядом с названием компании текстом: alt пустой;
• логотип-ссылка: alt описывает назначение ссылки, например «Конференция «Логистика-бизнес» — на главную»;
• картинка-кнопка «Зарегистрироваться»: alt повторяет надпись на кнопке.

Не пишите в alt лозунги и рекламные описания партнёров. Достаточно названия.

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

Вымышленная конференция «Логистика-бизнес». Фрагмент шапки, карточки спикера и схемы:

<a href="/">
  <img src="logo.png" alt="Конференция «Логистика-бизнес» — на главную">
</a>

<div class="speaker">
  <img src="lebedeva.jpg" alt="">
  <h3>Анна Лебедева</h3>
  <p>Директор по логистике</p>
</div>

<figure>
  <img src="plan.png" alt="Схема этажа с залами A и B">
  <figcaption>От регистрации поднимитесь по главной лестнице: залы A и B справа.</figcaption>
</figure>

Фото спикера здесь декоративное, потому что имя и должность уже есть в тексте. Схема получила краткий alt и полноценное текстовое описание в подписи.

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

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

Проверочный список:

• у каждого img есть атрибут alt, пусть даже пустой;
• декоративные картинки и дубли текста имеют alt="";
• в подписях нет слов «фото», «картинка», имён файлов;
• расписание, даты, адрес и цены доступны текстом, а не только в картинке;
• у схемы проезда и зала есть текстовое описание маршрута;
• у логотипов-ссылок и картинок-кнопок alt передаёт действие;
• страница остаётся понятной с отключённой загрузкой изображений в браузере;
• основные страницы прослушаны хотя бы одной программой экранного чтения, например NVDA.

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