Как добавить альтернативный текст к изображению (alt text)

Что такое атрибут alt?

Альтернативный текст (атрибут alt) — это <img> тег и описывает содержание изображения словами: <img src="..." alt="...">. Когда изображение не загружается (из-за медленного соединения или неверного пути к файлу), оно отображается в браузере вместо него, прочитывается вслух экранными считывателями для пользователей с нарушениями зрения и помогает поисковым системам понять, что изображено на картинке, поскольку Google не «видит» изображение на уровне пикселей, а в основном полагается на окружающий текст и атрибут alt.

Альтернативный текст служит совершенно иной цели, чем имя файла изображения (например, IMG_2031.jpg): имя файла предназначено для сервера/файловой системы, а альтернативный текст — для передачи смысла. Не следует путать эти два понятия.

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

Хотя в некоторых средах разработки оставление атрибута alt пустым может пройти проверку валидности HTML, это не означает, что альтернативный текст действительно несет смысловую нагрузку; инструмент проверки валидности проверяет лишь наличие атрибута, а не качество его содержимого.

Почему это важно?

Альтернативный текст имеет решающее значение как с точки зрения доступности, так и с точки зрения визуального SEO. Пользователи с нарушениями зрения, просматривающие страницу с помощью программ-считывателей экрана, узнают о содержании изображения из альтернативного текста; если этот текст отсутствует, программа-считыватель экрана обычно зачитывает только слово «изображение» или имя файла, что приводит к потере информации. В некоторых странах доступность может быть даже юридическим требованием.

Поскольку поисковые системы не могут «видеть» содержание изображений напрямую, они ранжируют страницу в результатах поиска по изображениям (Google Изображения) на основе альтернативного текста. Добавление правильного альтернативного текста к изображениям товаров на сайтах электронной коммерции может увеличить дополнительный трафик, поступающий через Google Изображения. Отсутствие альтернативного текста негативно сказывается как на пользовательском опыте, так и на трафике из визуального поиска.

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

Как это исправить?

Напишите краткий и описательный альтернативный текст для каждого значимого изображения.
Только для изображений, используемых исключительно в декоративных целях (например, фоновые украшения), alt="" , чтобы экранный считыватель пропускал изображение; это отличается от полного отсутствия атрибута alt.
Используйте ключевое слово только в том случае, если оно действительно описывает изображение, и в естественной форме.
Альтернативный текст должен быть кратким и чётким; избегайте излишне длинных предложений — обычно достаточно нескольких слов.
В изображениях товаров указывайте название товара и его важные характеристики (такие как цвет, модель, ракурс).
Если вы используете массовую загрузку в системе управления контентом, по возможности создавайте текст alt вручную или, по крайней мере, с помощью осмысленного шаблона, основанного на названии товара, вместо автоматического заполнения.
В случае сложных изображений, таких как инфографика или таблицы, рассмотрите возможность представления деталей, которые не помещаются в альтернативный текст, в виде простого текста непосредственно под изображением.

Пример

<img src="krasnye-sportivnye-krossovki.jpg" alt="Красные мужские спортивные кроссовки, вид сбоку">

Плохой пример: <img src="IMG_2031.jpg" alt="изображение"> — ни имя файла, ни альтернативный текст не дают никакой информации о содержании изображения. Еще один плохой пример: alt="обувь обувь спортивная обувь дешевая обувь обувь со скидкой купить обувь" — это не описание конкретного изображения, а просто набивка ключевыми словами, что создает бессмысленный и скучный опыт для пользователя экранного считывателя.

Распространенные ошибки

Оставлять атрибут alt полностью пустым (для изображений, не выполняющих декоративную функцию).
Использование в качестве альтернативного текста бессмысленных имён файлов, таких как «resim1.jpg» или «IMG_2023».
Вставка в атрибут alt множества ключевых слов подряд (например, «обувь, спортивная обувь, дешевая обувь, обувь со скидкой»).
Повторение одного и того же общего атрибута alt для всех изображений.
Отчет Seoraporu.co перечисляет каждый отсутствующий атрибут alt по отдельности; на крупных сайтах это, как правило, проблема, которую необходимо исправить массово в шаблоне управления товарами/изображениями.