WCAG 1.1.1 Нетекстовый контент

Критерий успеха 1.1.1 нужен для того, чтобы люди, которые не видят изображение, всё равно получали информацию, которую оно несёт. Текстовую альтернативу слышат пользователи программ экранного доступа (скринридеров), а также те, у кого картинки не загрузились. Это уровень A, первый критерий WCAG и часть EN 301 549 (пункт 9.1.1.1). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Весь нетекстовый контент — изображения, иконки, графики, кнопки-картинки, SVG — должен иметь текстовую альтернативу, выполняющую равноценную задачу. Для некоторых видов контента WCAG требует меньше:

• Элементы управления и ввода: у изображения, которое является кнопкой или принимает ввод, должно быть имя, описывающее назначение («Добавить в избранное», а не «сердечко»).
• Медиа, зависящие от времени (видео, аудио): текстовая альтернатива должна как минимум их идентифицировать; субтитры и описания регулируются критериями 1.2.x.
• Тесты, которые потеряли бы смысл в текстовом виде, и контент, созданный ради сенсорного впечатления (например, музыкальное произведение): как минимум описательная идентификация.
• CAPTCHA: текстовая альтернатива, описывающая её назначение, плюс альтернативная CAPTCHA для другого органа чувств (например, звуковая наряду с визуальной).
• Декор, оформление, невидимый контент: должны быть реализованы так, чтобы вспомогательные технологии могли их игнорировать, — в HTML это alt="" или фоновое изображение в CSS.

Типичные ошибки в интернет-магазине

• фото товаров без alt или с зачитываемым вместо описания именем файла (IMG_4021.jpg);
• кнопки поиска, корзины, личного кабинета или закрытия только из иконки и без доступного имени;
• промо-баннеры, где предложение («−30 % в эти выходные») «впечатано» в картинку, а альтернативного текста нет;
• значки платёжных систем и доверия, таблицы размеров или звёзды рейтинга, показанные только картинками;

Как проверить

Автоматически: наша проверка находит изображения, поля ввода типа image, объекты, SVG и элементы с role="img" без текстовой альтернативы, а также индикаторы прогресса и шкалы без имени (правила alt у изображений, alt у input type="image", alt у SVG и связанные). Она не может оценить, верен ли имеющийся альтернативный текст, поэтому отсутствие замечаний ещё не означает, что критерий выполнен.

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

Как исправить

• Пишите альтернативный текст в редакторе товара вашей платформы (в Shopify, WooCommerce и большинстве других есть поле «alt text» для каждого медиафайла).
• Описывайте то, что важно в контексте: «Синяя льняная рубашка, вид сзади», а не «рубашка».
• Дайте кнопкам-иконкам видимую подпись или aria-label; саму иконку скройте от вспомогательных технологий.
• Для чисто декоративных изображений используйте alt="", а не отсутствующий атрибут.
• К графикам и инфографике добавьте краткое резюме или таблицу с данными.

Связанные критерии

• 1.4.5 Изображения текста — используйте настоящий текст вместо текста на картинках.
• 1.2.1 Только аудио и только видео (записанные) — альтернативы для медиафайлов.
• Бесплатная проверка одной страницы — найдите на своём сайте изображения без альтернативного текста.

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

Нужен ли альтернативный текст каждому изображению по WCAG?

Каждому изображению нужна текстовая альтернатива, которая выполняет ту же задачу. Исключение — чисто декоративные изображения: им ставят пустой атрибут alt (alt=""), чтобы программы экранного доступа их пропускали.

Что писать в альтернативном тексте фото товара?

То, что покупателю нужно узнать из картинки: сам товар и цвет, узор или деталь, которые на ней видны. Не начинайте с «изображение…» и не повторяйте дословно название товара, если оно стоит прямо рядом с фото.

Подпадают ли кнопки-иконки под 1.1.1?

Да. У элемента управления вроде лупы, корзины или крестика должно быть имя, описывающее его назначение, например «Поиск» или «Открыть корзину». Критерий 4.1.2 «Имя, роль, значение» добавляет для элементов управления и другие требования.

Может ли автоматическая проверка оценить альтернативный текст?

Она находит изображения, иконки и SVG совсем без текстовой альтернативы. Но она не может определить, точен и полезен ли уже имеющийся альтернативный текст, — для этого нужен человек.