Изображения без секретов: полное руководство по написанию эффективного замещающего текста

"Какое имя файла вы бы хотели, чтобы программа чтения с экрана читала вам вслух 40 раз в день?" Это немного абсурдный вопрос, но именно это и происходит, когда у значимого изображения остается alt="image1.jpg" или, что еще хуже, вообще нет замещающего текста. Эта статья — практическое руководство по написанию замещающего текста, который действительно помогает — не просто присутствует, но и полезен.

Почему плохой замещающий текст почти так же плох, как и его отсутствие

В соответствии с WCAG 1.1.1 весь нетекстовый контент должен иметь текстовую альтернативу, но формальное требование — это только половина дела. «image1.jpg», «image» или «logo» технически соответствуют этому требованию (есть атрибут alt), но они не несут никакой реальной информации. Пользователь программы чтения с экрана, услышавший строку «изображение… изображение… image23.png», расстраивается не меньше, чем зрячий пользователь, смотрящий на серию пустых кадров.

Как написать хороший альтернативный текст

Руководящее правило: описывайте послание изображения в контексте, в котором оно появляется, а не буквальное описание того, что вы видите. Фото людей за столом на собрании команды, сопровождающее статью о сотрудничестве, можно назвать «Команда, работающая вместе за столом», а не «Фото людей». Для диаграммы или графика опишите вывод, который она представляет: «Гистограмма, показывающая 40%-ное увеличение продаж в третьем квартале» значительно лучше, чем «Гистограмма».

• Коротко и содержательно — обычно достаточно 1–2 предложений; нет необходимости описывать каждую визуальную деталь.
• Пропустить «изображение» или «изображение» — программа чтения с экрана уже сообщает, что это изображение, поэтому повторять его не нужно.
• Учитывайте окружающий текст — одно и то же изображение может иметь разный альтернативный текст в разных контекстах.

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

Не каждое изображение нуждается в описании. Чисто декоративные изображения — графические разделительные линии, фоновые иллюстрации, значки, которые просто повторяют соседний текст — лучше всего помечать тегомalt=""(пустой замещающий текст, не отсутствует), поэтому программа чтения с экрана полностью их пропускает. Разница между «отсутствует» и «намеренно пустым» имеет решающее значение: отсутствие звучит как ошибка или считывает имя файла; намеренно пустой просто молча пропускает его.

Что делать со сложными диаграммами и диаграммами

Для сложной диаграммы данных, иллюстрированной сравнительной таблицы или инфографики с несколькими уровнями информации короткого замещающего текста недостаточно — нужно передать слишком много информации. Решение: короткий замещающий текст, описывающий общую тему, а рядом с ним (в обычном тексте вокруг изображения, а не только в атрибуте alt) более подробное описание важных данных или эквивалентная таблица данных, по которой может перемещаться программа чтения с экрана.