Атрибут alt у изображений

alt — текстовая альтернатива изображению:

<img src="/img/nozh-santoku.jpg" alt="Кухонный нож сантоку с деревянной рукоятью, лезвие 18 см">

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

Зачем это нужно

Доступность. Для незрячего пользователя картинка без alt — это либо тишина, либо озвученное имя файла: «изображение IMG-20240513-155.jpg». Для интернет-магазина, где половина информации в фотографиях, это делает сайт непригодным.

Поиск по картинкам. Отдельный источник трафика, особенно для товаров, интерьеров, работ «до и после». Поисковик опирается на alt, имя файла и текст вокруг изображения.

Понимание страницы. Подписи к иллюстрациям помогают поисковику определить тему — особенно там, где текста мало.

Как писать

• Описывайте, что изображено, как если бы рассказывали по телефону. Красный чайник со свистком на газовой плите — хорошо. Чайник — мало. Купить чайник Москва недорого — переспам.
• Коротко: обычно хватает 5–15 слов.
• Без «фото», «картинка», «изображение» в начале — скринридер и так объявляет, что это изображение.
• Ключевое слово — если оно уместно по смыслу. В карточке товара название модели в описании естественно.
• Уникально для каждой картинки. Десять фотографий с одинаковым alt бесполезны.

Когда alt должен быть пустым

Декоративные изображения — фоновые узоры, разделители, иконки рядом с текстом, который уже всё сказал:

<img src="/img/divider.svg" alt="">

Пустой alt — это не то же самое, что отсутствующий. Пустой говорит скринридеру «пропусти, здесь нет смысла». Отсутствующий заставляет читать имя файла. Поэтому атрибут пишем всегда, а вот значение может быть пустым.

Ещё лучше — выводить чисто декоративную графику через CSS background-image: тогда её вообще нет в содержимом документа.

Соседние вещи, которые стоит проверить

• Имя файла. nozh-santoku-18cm.jpg полезнее, чем IMG_4815.jpg.
• Размеры в разметке. Атрибуты width и height резервируют место и не дают странице «прыгать» при загрузке.
• Формат и вес. WebP вместо JPEG экономит 25–35% при том же качестве — это же уменьшает вес страницы.
• Отложенная загрузка для картинок ниже первого экрана: loading="lazy".

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

• Пункт аудита «Alt у изображений» показывает, сколько картинок без описания и какие именно — с адресами файлов, чтобы не искать вручную.
• В консоли браузера:

document.querySelectorAll('img:not([alt])').forEach(i => console.log(i.src));

Обратите внимание: этот запрос находит изображения без атрибута; картинки с осознанно пустым alt="" в него не попадут — так и задумано.