Оптимизация alt изображений

Изображения и графика делают контент более приятным и понятным. Особенно для людей с когнитивными нарушениями и проблемами обучения. Изображения служат подсказками для людей со слабым зрением.

Оптимизированные изображения полезны во многих ситуациях, например:

Люди, использующие программы чтения с экрана: альтернативный текст можно читать вслух или отображать шрифтом Брайля.
Люди, использующие программное обеспечение для ввода речи: пользователи могут навести фокус на кнопку или связанное изображение с помощью одной голосовой команды.
Люди, просматривающие веб-сайты с поддержкой речи: альтернативный текст можно читать вслух
Пользователи мобильного Интернета: изображения можно отключить, особенно для передачи данных в роуминге.
Оптимизация для поисковых систем: изображения становятся индексируемыми поисковыми системами.

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

Декоративные изображение не добавляют информации к содержимому страницы. Например информация предоставленная на изображении может уже быть представлена в тексте рядом или изображение используется для оформления дизайна сайта. Атрибут alt в данном случае будет дублировать информацию либо отвлекать пользователя.

Решение о декоративности изображения принимает автор исходя из целесообразности добавления элемента на страницу. Изображения могут быть декоративными, если они:

Создают визуальный стиль: границы, углы, иконки, переходы и тд.
Дополняют текст ссылки, являются фоном, чтобы увеличить область нажатия и визуальный вид
Иллюстрирует соседний текст, но не содержит информации. Изображение используется для передачи атмосферы
Определяется и описывается соседним текстом. Изображение уже описано в тексте рядом

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

Функциональные изображения используются для инициирования действий. Скачать, купить, заказать, распечатать, поиск и т.д. Они используются на кнопках, ссылках и других интерактивных элементах. Альтернативный текст на таком изображении должен передавать действие, а не информацию на изображении. Например на изображении поиска с лупой нужно включать в alt=»поиск» а не лупа или увеличительное стекло.

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

На изображении предоставлен текст для чтения. Не рекомендуется использовать изображения с текстом предназначенные для чтения. Текст должен быть фактическим. В тех редких случаях, когда необходимо использовать изображения текста, альтернативный текст должен содержать тот же текст, что и на изображении.

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

Информативные изображения передают простую концепцию или информацию, которую можно выразить в одной фразе. Альтернативный текст передает значение или содержимое, отображаемое визуально, но не является буквальным описанием изображения. Иногда требуется подробное буквальное описание, но только когда содержимое изображения — это часть передаваемой информации. Считать изображение информативным или декоративным — выбор автора. Он задает себе вопрос: какую задачу решает изображение на странице.

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

Сложные изображения содержат важную информацию – больше, чем можно передать в короткой фразе или предложении. Обычно это:

графики и диаграммы, включая блок-схемы и организационные схемы;
диаграммы и иллюстрации, где текст страницы зависит от способности пользователя понять изображение;
карты с указанием местоположения или другой информации, например, о погодных системах.

Подробнее о сложных изображениях

Группы изображений

Иногда одна мысль или фрагмент информации передается несколькими изображениями. Если например это рейтинг, указанный звездочками, то у первой звездочки alt=»Рейтинг 3 из 5″, а у остальных звездочек alt=»».

Если группа изображений объединена в коллекцию, как например слайдер, то каждое изображение должно иметь текстовую альтернативу, которая описывает его индивидуально, а так же отношение к группе.

Подробнее о группах изображений

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

Wave — позволяет проверять наличие и релевантность alt. Если указан красный значок alt ( ), на изображении нет альтернативного текста. Если значок зеленый, то виден альтернативный текст. Так можно быстро посмотреть передает ли alt нужную информацию.