Alt-текст и WCAG: как описывать изображения, с примерами

По каждому изображению на странице нужно принять решение: что должен услышать вместо него человек, который его не видит? Для этого и нужен alt-текст. Его зачитывают экранные дикторы, его используют поисковые системы, и браузер показывает его, когда изображение не загрузилось. WCAG не предписывает точную формулировку, но ставит чёткое требование, а W3C публикует практическое руководство о том, как его выполнить. На этой странице — краткое изложение того и другого с примерами из интернет-магазинов.

Это общая информация, а не юридическая консультация.

Что требует WCAG

Требование — это критерий 1.1.1 Нетекстовый контент, уровень A: у всего нетекстового контента, представленного пользователю, есть текстовая альтернатива, выполняющая эквивалентную задачу. Есть исключения. Элементам управления нужно имя, описывающее их назначение; для медиа, зависящих от времени, тестов, сенсорных впечатлений и CAPTCHA достаточно описательной идентификации; а декорация, оформление или невидимый контент должны быть реализованы так, чтобы ассистивные технологии могли их пропускать.

Два других критерия тесно связаны с этим:

• 1.4.5 Изображения текста (AA): используйте настоящий текст вместо текста, «запечённого» в изображение, если только пользователь не может настроить изображение текста или определённое оформление не является существенным; логотипы считаются существенными.
• 2.4.4 Назначение ссылки (в контексте) (A): если единственное содержимое ссылки — изображение, его alt-текст служит текстом ссылки.

Ключевое слово здесь — назначение. В документе Understanding от W3C показано, что одной и той же картинке с глобусом на одном сайте нужно «Международные поездки», а на другом — «Международные кампусы». Решает контекст, а не пиксели.

Дерево решений W3C из пяти вопросов

Дерево решений W3C по alt задаёт вопросы в таком порядке:

1. Содержит ли изображение текст? Если тот же текст есть рядом как настоящий, или текст — лишь визуальный эффект, используйте пустой alt. Если это иконка с функцией, опишите функцию. В остальных случаях alt включает текст изображения.
2. Находится ли изображение в ссылке или кнопке, и будет ли без него непонятно назначение? Тогда alt описывает цель перехода или действие.
3. Добавляет ли изображение смысл? Простое фото или графика получает короткое описание этого смысла; диаграмме или схеме нужна информация ещё и в другом месте страницы; изображение, повторяющее соседний текст, получает пустой alt.
4. Оно чисто декоративное? Тогда используйте пустой alt.
5. Ничего из перечисленного? Дерево охватывает не все случаи; см. полное руководство по изображениям.

Информативные изображения

Фото и иллюстрации, несущие информацию, получают краткое описание существенной информации, как говорится в руководстве W3C. В магазине это в основном фото товаров.

Наши рекомендации сверх WCAG: говорите о том, что человек иначе упустит, — цвет, материал, деталь, ради которой существует фото. Не начинайте с «изображение»: экранные дикторы и так объявляют изображение. Пишите коротко, а длинные характеристики помещайте в описание товара, где их может прочитать каждый.

Декоративные изображения

Фоновые текстуры, разделители, настроенческие картинки рядом с заголовком, который уже всё говорит: используйте alt="" (пустой атрибут) или CSS-фон. Пустой alt сообщает экранным дикторам, что изображение нужно пропустить. Отсутствие атрибута — это не то же самое: без него экранные дикторы могут зачитать имя файла или URL.

Будьте осторожны со словом «декоративное». Имиджевое фото на посадочной странице может быть декоративным; то же фото на странице товара, показывающее, как товар используется, — нет.

Функциональные изображения: ссылки, кнопки и иконки

Когда изображение — единственное содержимое ссылки или кнопки, его alt-текст называет цель перехода или действие, а не картинку. В руководстве W3C по функциональным изображениям приведены такие примеры:

• логотип со ссылкой на главную: «Главная W3C», а не «логотип»;
• лупа на кнопке поиска: «Поиск»;
• значок принтера: «Распечатать эту страницу», а не «принтер».

В магазине та же идея даёт «Корзина», «Удалить из корзины», «Следующее фото», «Добавить в избранное». Если иконка стоит рядом с видимым текстом, который уже это говорит, — значок корзины и слово «Корзина», — у самой иконки пустой alt или она скрыта от ассистивных технологий, чтобы имя не читалось дважды.

Логотипы

• Логотип как единственное содержимое ссылки на главную: alt говорит, куда ведёт ссылка, например «Example Shop — главная».
• Логотип рядом с названием компании текстом в той же ссылке: пустой alt, потому что текст уже называет её.
• Логотипы партнёров или платёжных систем: alt называет бренд («Visa», «Trusted Shops»), потому что логотип несёт эту информацию.

Логотипы также освобождены от требования к контрасту и от критерия 1.4.5 «Изображения текста».

Изображения текста

Баннеры распродажи со скидкой, написанной на картинке, — классический случай для магазина. Согласно 1.4.5, такой текст по возможности должен быть настоящим HTML-текстом поверх изображения, чтобы его можно было увеличить, перекрасить и перевести. Если изображение текста остаётся, в руководстве W3C сказано, что текстовая альтернатива должна содержать те же слова, что и изображение, — целиком «Летняя распродажа −30 % до 31 августа», а не «баннер».

Сложные изображения и группы

• Графики, таблицы размеров в виде изображений, инфографика: короткий alt, говорящий, что это такое, плюс полная информация текстом или таблицей рядом. W3C рекомендует, где это практично, предоставлять и исходные данные.
• Группы изображений, например пять звёзд рейтинга: одна альтернатива для всей группы («Оценка 4 из 5»), остальные изображения с пустым alt.

Что находит автоматическая проверка изображений

Наши проверки используют правила axe-core для текстовых альтернатив в настоящем браузере. Они находят:

• изображения без какой-либо текстовой альтернативы (image-alt);
• кнопки-изображения без описания (input-image-alt);
• элементы с ролью изображения и SVG-графику без текстовой альтернативы (role-img-alt, svg-img-alt) — звёзды рейтинга, иконки, значки;
• области карт-изображений без описания (area-alt) и встроенные объекты без описания (object-alt);
• ссылки и кнопки без доступного имени, что часто означает иконку без подписи;
• как рекомендацию — alt-текст, повторяющий видимый текст рядом (image-redundant-alt).

То, что не может оценить ни один автоматический инструмент: подходит ли описание «Синяя льняная рубашка», действительно ли изображение, помеченное декоративным, таковым является и есть ли на баннере текст. Это решает человек. Подробнее — в библиотеке правил.

Как проверить изображения

1. Запустите бесплатный WCAG тестер на странице товара и странице категории; он перечисляет изображения без альтернатив и показывает скриншот каждого.
2. Прочитайте alt-тексты в основных шаблонах: товар, категория, главная, корзина.
3. Включите экранный диктор или посмотрите дерево доступности в инструментах разработчика браузера и послушайте одну страницу товара.
4. Сначала исправьте шаблон, затем изображения: в большинстве систем магазинов alt-текст каждого фото товара можно задать в админке.

Наши проверки — это автоматическая проверка, а не полный аудит и не юридическая консультация. Остальные критерии для изображений и цвета — в нашем обзоре WCAG и в чек-листе WCAG 2.2.

Частые вопросы

Что WCAG говорит об alt-тексте?

Критерий успеха 1.1.1 «Нетекстовый контент» (уровень A) требует текстовой альтернативы, выполняющей эквивалентную задачу, для всего нетекстового контента. Декоративные изображения должны быть реализованы так, чтобы ассистивные технологии могли их пропускать, обычно с пустым атрибутом alt.

Когда alt-текст должен быть пустым?

Когда изображение чисто декоративное или та же информация уже есть текстом рядом, например логотип рядом с видимым названием компании в той же ссылке. Используйте alt="" — если атрибут вообще отсутствует, это ошибка, потому что экранные дикторы могут прочитать имя файла.

Как написать alt-текст для кнопки-иконки?

Описывайте действие, а не картинку: «Поиск» для лупы, «Распечатать эту страницу» для значка принтера, «Удалить из корзины» для корзины-урны. Первые два примера приведены в руководстве W3C по изображениям.

Может ли проверка изображений сказать, хорош ли мой alt-текст?

Только отчасти. Автоматические проверки находят изображения, кнопки-изображения, SVG-графику и области карт-изображений без какой-либо текстовой альтернативы, а также alt-текст, повторяющий соседний текст. Описывает ли текст изображение на самом деле, решает человек.

Разрешены ли изображения текста по WCAG?

На уровне AA критерий 1.4.5 «Изображения текста» просит использовать настоящий текст вместо текста в изображениях там, где это позволяет технология. Логотипы — исключение. Если вы используете изображение текста, его alt-текст должен содержать те же слова.

Источники

• W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
• W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
• W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/