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

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

Что теряет посетитель, если у картинки нет описания

Программа экранного чтения вместо изображения зачитывает его alt. Если атрибута нет, она нередко произносит имя файла, например «IMG 4821 jpg». Для бюро это опаснее, чем для сайта-визитки: на картинках бывают точка сбора, схема маршрута, расписание, условия акции. Без текстового дубля человек не узнает, где встречаться с гидом и что входит в программу. Тот же текст показывается, когда изображение не загрузилось.

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

• Фото достопримечательности или группы. Опишите то, что помогает выбрать экскурсию: место, действие, масштаб группы. Пример: «Гид показывает группе из восьми человек фасад ратуши».
• Фото гида. Если имя и должность указаны рядом текстом, достаточно «Гид Анна ведёт группу по набережной». Не повторяйте всю биографию.
• Карта точки сбора. В alt укажите суть, а точный адрес и ориентиры вынесите в обычный текст рядом. Картинка карты сама по себе недоступна.
• Схема маршрута или инфографика. Остановки и время продублируйте нумерованным списком, а в alt напишите, что это за схема.
• Баннер с акцией. Если текст набран прямо на картинке, он должен быть и в alt. Лучше сделать его обычным текстом на странице.
• Картинка-ссылка или кнопка. alt описывает действие: «Выбрать дату экскурсии», а не «Кнопка».
• Декоративные элементы: орнаменты, разделители, фоновые узоры. Для них пишут пустой alt='', чтобы программа их пропускала.

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

Возьмём вымышленную страницу «Старый город за два часа». На ней три изображения и карта.

Слабый вариант: <img src='photo1.jpg' alt='экскурсия Старый город купить экскурсию недорого'>. Это набор слов, а не описание, и человек без зрения не поймёт, что на фото.

Рабочий вариант: <img src='meeting-arch.jpg' alt='Арка во двор ратуши: здесь начинается экскурсия, гид стоит с зелёным зонтом'>. Описание подсказывает, где искать группу.

Для карты: <img src='map.png' alt='Карта: точка сбора у арки ратуши, в двух минутах от трамвайной остановки'>. Под ней идёт абзац: «Встречаемся у арки ратуши, вход со стороны площади. За 15 минут до начала гид пришлёт сообщение с номером телефона». Адрес записан текстом, поэтому его можно прочитать, скопировать и вставить в навигатор.

Для фонового орнамента в шапке блока: <img src='ornament.svg' alt=''>.

Правила, которые легко передать редактору

• Начинайте с главного. Обычно хватает одного предложения; длинные описания лучше вынести в текст страницы.
• Не пишите «фото», «изображение», «картинка»: программа и так сообщает, что это изображение.
• Не перечисляйте ключевые слова. Описание должно читаться как обычная фраза.
• Не дублируйте соседний текст. Если подпись под фото уже говорит «Двор ратуши», в alt добавьте то, чего в подписи нет, или оставьте его пустым, если картинка чисто иллюстративна.
• В галерее у каждого фото свой текст. Двадцать одинаковых «Фото экскурсии» бесполезны.
• Важную информацию (цена, время, место, условия) всегда держите в обычном тексте, а не только на картинке.

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

Одних правил мало: когда менеджер загружает пятьдесят фото к новому сезону, поле легко оставить пустым. Что можно предусмотреть в админке:

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

Проверить страницу можно без специальных навыков: отключите загрузку изображений в настройках браузера и посмотрите, остался ли смысл. Затем включите бесплатную программу экранного чтения (NVDA на компьютере, VoiceOver на iPhone) и пройдите страницу экскурсии от заголовка до кнопки заказа.

Проверочный список перед публикацией страницы

• У каждого содержательного изображения есть осмысленный alt.
• У декоративных изображений alt пустой, а не отсутствует.
• Адрес точки сбора, время и цена есть в тексте, а не только на картинке или карте.
• Схема маршрута продублирована списком остановок.
• Картинки-ссылки описывают действие или адрес перехода.
• В описаниях нет слов «фото», «картинка» и перечня ключевых слов.
• Фото в галерее описаны по отдельности.
• Страница понятна при отключённых изображениях.

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