"Какое имя файла вы бы хотели, чтобы программа чтения с экрана читала вам вслух 40 раз в день?" Это немного абсурдный вопрос, но именно это и происходит, когда у значимого изображения остается alt="image1.jpg" или, что еще хуже, вообще нет замещающего текста. Эта статья представляет собой практическое руководство по написанию замещающего текста, который действительно помогает — не только представить, но и хорошо.
Короче — о чем идет речь в этом руководстве
Почему плохой замещающий текст почти так же плох, как и его отсутствие
В соответствии с WCAG 1.1.1 весь нетекстовый контент должен иметь текстовую альтернативу, но формальное требование — это только половина дела. «image1.jpg», «image» или «logo» технически соответствуют этому требованию (есть атрибут alt), но они не несут никакой реальной информации. Пользователь программы чтения с экрана, услышавший строку «изображение… изображение… image23.png», расстраивается не меньше, чем зрячий пользователь, смотрящий на серию пустых кадров.
Как написать хороший альтернативный текст
Основное правило: опишите изображение сообщение в контексте, в котором он появляется, а не буквальное описание того, что вы видите. Фото людей за столом на собрании команды, сопровождающее статью о сотрудничестве, можно назвать «Команда, работающая вместе за столом», а не «Фото людей». Для диаграммы или графика опишите вынос на диаграмме представлено: «Гистограмма, показывающая 40%-ное увеличение продаж в третьем квартале» значительно лучше, чем «Гистограмма».
- Коротко и содержательно — обычно достаточно 1–2 предложений; нет необходимости описывать каждую визуальную деталь.
- Пропустить «изображение» или «изображение» — программа чтения с экрана уже сообщает, что это изображение, поэтому повторять его не нужно.
- Обратите внимание на окружающий текст — одно и то же изображение может иметь разный альтернативный текст в разных контекстах.
Когда следует оставлять замещающий текст намеренно пустым
Не каждое изображение нуждается в описании. Чисто декоративные изображения — графические разделительные линии, фоновые иллюстрации, значки, которые просто повторяют соседний текст — лучше всего помечать тегом alt="" (пустой замещающий текст, не отсутствует), поэтому программа чтения с экрана полностью их пропускает. Разница между «отсутствует» и «намеренно пустым» имеет решающее значение: отсутствие звучит как ошибка или считывает имя файла; намеренно пустой просто молча пропускает его.
💡 Практический совет
Быстрый тест: если вы полностью удалите изображение со страницы, упустит ли что-нибудь пользователь, который его не видит? Если нет — возможно, он декоративен и подойдет к пустому альт.
Что делать со сложными диаграммами и диаграммами
Для сложной диаграммы данных, иллюстрированной сравнительной таблицы или инфографики с несколькими уровнями информации короткого замещающего текста недостаточно — нужно передать слишком много информации. Решение: короткий замещающий текст, описывающий общую тему, а рядом с ним (в обычном тексте вокруг изображения, а не только в атрибуте alt) более подробное описание важных данных или эквивалентная таблица данных, по которой может перемещаться программа чтения с экрана.
Не уверены, какой альтернативный текст отсутствует или проблематичен на вашем сайте?
Наш инструмент находит изображения без замещающего текста в каждом документе на вашем сайте и помечает их по приоритету.
Сделайте свои документы доступными бесплатно ←