Alt
изображений: написать и
проверить

Проверяйте смысл изображения, а не заполненность поля

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

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

Начните с одного реального сценария: покупатель выбирает цвет товара, читатель изучает схему или посетитель нажимает кнопку. Запишите, что он должен узнать или сделать. По этой записи проще оценить alt, чем по количеству символов. Ниже используем учебный каталог настольных ламп: названия моделей и данные примеров вымышлены.

Разделите alt, подпись, имя файла и микроразметку

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

Название «Лампа N-7» в библиотеке файлов ещё не подтверждает, что оно стало альтернативным текстом изображения. И наоборот: правильно заполненный alt не исправляет чужую обложку в карточке статьи. Это две отдельные проверки.

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

Определите роль каждой картинки

Откройте дерево решений W3C WAI. Сначала выясните, несёт ли картинка сведения, выполняет действие или служит оформлением. Одного признака «это фотография» недостаточно: та же фотография бывает товарным изображением, фоном баннера или ссылкой на раздел.

1. Есть значимая информация? Сформулируйте, какую часть содержания заменит текст.
2. Это ссылка или кнопка? Проверьте, понятно ли её назначение без картинки и есть ли уже текст внутри того же элемента.
3. Это сложная схема? Запланируйте объяснение или данные рядом с коротким alt.
4. Смысл уже передан, а картинка только украшает блок? Рассмотрите пустой alt="".

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

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

Напишите то, что человек должен понять без изображения

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

«Настольная лампа N-7, графитовый корпус, шарнирный кронштейн» объясняет видимый предмет. «Купить лучшую лампу недорого с доставкой» описывает желание продавца. Не добавляйте в alt материал, награды, совместимость или технические характеристики, которые не можете подтвердить.

Удобный редакционный приём: сначала написать полное объяснение, затем убрать то, что не помогает текущему сценарию. Цвет важен при выборе варианта, но может быть неважен в инструкции по расположению выключателя. Слова «фотография» или «схема» полезны, когда сам формат существенен для понимания; механический запрет на них не нужен.

Не устанавливайте для всех изображений обязательные 100, 125 или 150 символов. Длину определяет задача. Длинное техническое объяснение лучше вынести в основной текст, а короткую альтернативу оставить опорной. В технике H37 W3C основной критерий — передать смысл изображения; значимые слова внутри самой картинки тоже нельзя потерять.

Разберите галерею, баннер и рабочий скриншот

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

Не добивайтесь формальной уникальности заменой «вид сбоку» на «боковой ракурс» у одинаковых кадров. Если изображения показывают одну и ту же информацию, повтор текста сам по себе не становится ошибкой. Если кадры различаются, текст должен передавать полезное отличие.

Для галереи отдельно проверьте основное изображение и кнопки миниатюр. Миниатюра может переключать кадр: тогда пользователю нужно понятное название действия, например «Показать регулятор яркости», а не только описание пикселей.

Не путайте отсутствие атрибута с осознанно пустым значением

Рекомендации WAI для декора допускают пустой alt: это помогает не озвучивать оформление как содержание. Но отсутствие атрибута — другое состояние. Некоторые программы чтения в таком случае могут объявлять имя файла.

<!-- Содержательная фотография -->
<img src="lamp-n7.webp"
     alt="Настольная лампа N-7 в графитовом цвете">

<!-- Декор, который не добавляет сведений -->
<img src="section-divider.webp" alt="">

<!-- Изображение — единственное содержимое ссылки -->
<a href="/catalog/lamps/">
  <img src="lamps-category.webp" alt="Каталог настольных ламп">
</a>

<!-- Назначение уже передано текстом той же ссылки -->
<a href="/instructions/lamp-n7.pdf">
  <img src="pdf-icon.svg" alt="">
  Скачать инструкцию к лампе N-7 (PDF)
</a>

В руководстве WAI о функциональных изображениях акцент сделан на назначении действия. Проверяйте всю ссылку или кнопку, а не изолированное поле картинки: дополнительное имя через ARIA тоже может влиять на результат.

Практический тест: прочитайте название элемента, не глядя на его рисунок. Если получится только «иконка», «image» или адрес файла, посетителю трудно понять действие. Если название дважды повторяет одну фразу, выясните, не описали ли вы повторно декоративный значок.

Дайте сложному изображению текстовое объяснение

График, карта или схема процесса могут содержать больше сведений, чем помещается в удобную короткую альтернативу. По рекомендациям WAI для сложных изображений, короткое описание дополняют доступным подробным объяснением. Формат зависит от содержания: таблица значений, последовательность шагов, описание связей.

Учебный график показывает 12, 18 и 15 обращений за три месяца. Alt «График обращений за январь–март; значения приведены в таблице ниже» помогает найти эквивалент. Рядом можно написать: «После роста во втором месяце число обращений снизилось, но осталось выше первого месяца». Если вывод важен для статьи, он должен быть обычным текстом, а не только линией на графике.

У схемы настройки CRM важны порядок действий и условия перехода. У плана помещения — расположение нужного объекта и путь к нему. Не ограничивайтесь фразой «подробности на картинке»: она возвращает человека к тому же недоступному источнику информации.

Проверьте alt в опубликованной странице

Откройте страницу обычным посетителем. Найдите изображение, вызовите контекстное меню и выберите просмотр кода элемента. Название команды зависит от браузера; в Chrome это открывает панель Elements инструментов разработчика. Найдите именно img, а не внешнюю ссылку или контейнер.

1. Посмотрите, существует ли атрибут alt и чему он равен.
2. Сопоставьте значение с изображением и окружающим текстом.
3. Если это кнопка или ссылка, проверьте название всего интерактивного элемента в панели доступности браузера.
4. Повторите проверку после открытия галереи, переключения варианта товара и на узком экране.

Для разработчика ниже — короткая проверка всех img текущего документа в консоли браузера. Она только читает страницу и выводит таблицу, ничего не отправляет и не изменяет.

console.table(Array.from(document.images, (img, index) => ({
  number: index + 1,
  source: img.currentSrc || img.src,
  state: !img.hasAttribute('alt') ? 'атрибут отсутствует'
    : img.alt.trim() ? 'есть текст' : 'пустое значение',
  alt: img.getAttribute('alt')
})));

Этот список не проверяет качество формулировок, CSS-фоны, изображения внутри других документов и все возможные состояния приложения. Он также показывает текущий DOM после работы скриптов. Если в исходном HTML и после загрузки получаются разные значения, выясните, какой компонент заменяет изображение.

Соберите изображения и страницы в Screaming Frog

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

1. Установите Screaming Frog SEO Spider с официального сайта. Введите стартовый URL в поле Enter URL to spider и запустите обход кнопкой Start.
2. Откройте вкладку Images. Отдельно просмотрите фильтры Missing Alt Attribute и Missing Alt Text.
3. Выберите изображение и откройте нижнюю вкладку Image Details: она помогает связать файл с местами использования.
4. Через Bulk Export → Images → All Images выгрузите все изображения с исходными страницами и alt. Доступные пункты могут отличаться в вашей версии.
5. Отметьте содержательные изображения без альтернативы, декоративные исключения, ошибочные описания и неясные названия ссылок.

Названия фильтров и экспорт описаны в официальной инструкции Screaming Frog. Фильтр Missing Alt Text включает пустые значения: его строки нельзя все без разбора считать ошибками.

Зафиксируйте охват: какие разделы обойдены, какие URL исключены, есть ли ограничения программы или закрытые страницы. Если ожидаемой галереи в выгрузке нет, проверьте её загрузку через JavaScript и настройки обхода. Фраза «ошибок не найдено» ничего не говорит о страницах, которые проверка не увидела.

Исправьте конкретное вхождение изображения

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

Документация WordPress различает локальную настройку блока и значение в медиатеке: текст в блоке относится к конкретному месту, а значение в библиотеке служит исходным при вставке изображения. Не рассчитывайте, что изменение библиотеки автоматически перепишет все старые вставки.

Если изображение находится в блоке «Медиа и текст», проверьте его собственные настройки. У конструктора страниц, товарной галереи и шаблона темы источник alt может быть другим. Для вставки через HTML меняется атрибут самого img; для общего компонента — правило, которое формирует его разметку.

Такое замечание описывает место и результат проверки. Просьба «прописать alt везде» не объясняет, какой шаблон сломан и какие исключения нужно сохранить.

Исправляйте повторяющееся правило, затем проверяйте исключения

Для большого каталога согласуйте исходные поля: название модели, цвет, ракурс, деталь. Постройте правило только на надёжно заполненных данных. Если ракурс не хранится, не добавляйте его случайным образом. Лучше короткий точный текст, чем подробная выдумка.

Сначала примените правило к небольшой контрольной выборке. Включите обычный товар, несколько цветов, неполные характеристики, распроданный вариант, галерею и товар без фотографии. Проверьте, не появляется ли буквальное слово «undefined», внутренний артикул вместо названия или описание другого цветового варианта.

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

Нейросеть может предложить черновик, но редактор проверяет объект, контекст и назначение. Особенно осторожно относитесь к распознанным надписям, числам на графиках и техническим деталям. Перед массовым изменением сохраните выгрузку старых значений, согласуйте исключения и порядок отката. Если задача затрагивает шаблоны, её удобно включить в техническое развитие сайта.

Разбирайте проблемы файла отдельно от качества alt

Если картинка не загружается, откройте её адрес и проверьте ответ сервера. Ошибки доступа, удалённые файлы и запреты обхода требуют отдельных исправлений. Полезные инструкции: поиск битых ссылок и проверка robots.txt.

Google рекомендует обычные элементы изображения с рабочим src, полезный контекст и корректные альтернативные тексты. CSS-фон не индексируется Google как обычное изображение страницы. У адаптивного picture alt задаётся вложенному img; варианты файла должны сохранять смысл. Один alt не компенсирует неудачный мобильный кроп, который удалил нужную деталь.

Размеры, сжатие и отложенная загрузка влияют на скорость, а не заменяют текстовую альтернативу. Проверяйте их в PageSpeed Insights. Затем вручную убедитесь, что картинка появляется при прокрутке, не перекрывает подпись и остаётся разборчивой на телефоне.

Не обещайте фиксированный прирост трафика после заполнения alt. Зафиксируйте дату исправлений и перечень страниц, затем наблюдайте за показами и переходами по изображениям в доступных отчётах поисковых кабинетов. Учитывайте сезонность, изменения ассортимента и другие доработки. Для коммерческого результата важен весь путь посетителя, поэтому проверку изображений полезно связывать с SEO-продвижением страниц.

Закройте задачу проверкой, а не экспортом без красных строк

После публикации повторите обход тем же способом. Сравните одинаковые разделы и сохраните отчёт с датой. Список исключений должен объяснять оставшиеся пустые alt, а не маскировать непроверенные изображения. Отмечайте пункты по фактическому результату; этот чек-лист не отправляет данные.

В итоговом отчёте укажите несколько проверяемых примеров «до → после», адреса страниц, ответственного за шаблон и оставшиеся ограничения. Если выполняется общий запуск, включите этот результат в приёмку сайта у разработчика.

Частые вопросы об alt изображений