Альтернативный текст для изображений

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

Зачем нужен альтернативный текст

Экранный диктор превращает страницу в речь или шрифт Брайля. Дойдя до картинки, он не может посмотреть на пиксели, поэтому читает атрибут alt. Тот же текст появляется, если изображение не загрузилось, и именно его получает поисковая система или текстовый браузер. В WCAG 2.2 это требование стоит первым: критерий успешного применения 1.1.1 «Нетекстовый контент» уровня A требует, чтобы у каждого изображения, значка или графика, несущего информацию, была текстовая альтернатива с той же целью.

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

Четыре частых случая

Руководство W3C по изображениям делит большинство картинок на несколько групп. Информативные изображения, например фото или простая схема, получают короткое описание того, что на них показано. Декоративные изображения, например разделительная линия или фоновая текстура, получают пустой alt, записанный как alt="": он говорит вспомогательным технологиям пропустить их. Функциональные изображения, например логотип со ссылкой на главную или лупа, отправляющая поиск, получают текст о том, что произойдёт: «Corner Bakery, главная» или «Поиск», а не «логотип» или «лупа». Изображения текста получают слова, написанные на картинке.

Не указать атрибут совсем и оставить его пустым не одно и то же. Если alt нет вовсе, некоторые экранные дикторы читают имя файла, и слушатель услышит что-то вроде «IMG подчёркивание 4032 точка jpeg». Пустой alt является осознанным выбором, который говорит: «здесь смотреть не на что». Для сложного графика оставь alt коротким («Столбчатая диаграмма продаж по месяцам, описание ниже»), а числа помести в таблицу или абзац рядом, где их прочитают все.

Изображения без элемента img

Картинки могут попасть на страницу и как встроенный SVG или фоновое изображение CSS. У фона CSS вообще нет места для альтернативного текста, поэтому его стоит использовать только для украшения; всё, что несёт смысл, должно быть в HTML. Встроенный svg, который служит только украшением, можно скрыть с помощью aria-hidden="true", об этом рассказывает урок 6. WCAG не ограничивает длину alt, но руководство W3C снова и снова даёт один совет: будь краток и сообщай то, что важно в этом контексте. Если у тебя выходит три предложения, этому содержимому, скорее всего, место в тексте страницы, где его прочитают все.

Проверить свои страницы можно без особых программ. Открой исходный код страницы и найди <img: у каждого совпадения должен быть атрибут alt, пустой или нет. В инструментах разработчика основных браузеров есть и панель доступности, которая показывает, какое имя в итоге получило каждое изображение. Хорошая проверка: прочитать эти имена подряд, без контекста. Если в списке «изображение, изображение, график, логотип», пользователь экранного диктора услышит ровно это.