Содержание12
- Как писать атрибут alt: правило на одну страницу
- Чем атрибут alt отличается от title
- HTML, WCAG и ГОСТ
- Alt по типам картинок
- Если картинка работает как ссылка или кнопка
- Как поиск читает alt: Яндекс.Картинки и Google Images
- Как прописать alt в HTML и в CMS
- Какие ошибки в alt мешают доступности и поиску
- Как проверить alt до релиза и встроить проверку в работу
- Короткий чек-лист перед публикацией
- Частые вопросы
- Источники
Атрибут alt — текстовая замена изображения: его читают скринридеры, а браузер показывает при сбое загрузки. Поиск тоже может учитывать этот текст. Пишите, что изображено и зачем картинка нужна на странице. Для декора оставляйте пустой alt, а у картинки-ссылки называйте действие.
Как писать атрибут alt: правило на одну страницу
Представьте, что картинки на странице нет: alt должен передать её смысл одним коротким описанием. Он входит в тег img и служит текстовой заменой файла. Браузер покажет его, если изображение не загрузится, а скринридер прочитает человеку, который не видит картинку. Поиск может использовать alt как описание изображения.
Не начинайте с «картинка», «фото» или «изображение»: эти слова не объясняют содержание. Ориентируйтесь на контекст. Фото офиса на главной странице студии показывает, кто выполняет работу. В статье о брифе тот же снимок может пояснять, как проходит встреча. Одинаковая заготовка для всех страниц теряет этот смысл.
Универсального числа символов для alt не нужно. Оставьте детали, без которых изображение становится непонятным; остальное опустите.
Alt описывает смысл изображения на конкретной странице, а не собирает ключевые слова.
Слабо: «фото сайта». Лучше: «Главная интернет-магазина дверей с карточками товаров». Слабо: «обувь купить кроссовки недорого». Лучше: «Белые кроссовки, вид сбоку». Для логотипа укажите название бренда, если его ещё нет рядом текстом.
Чем атрибут alt отличается от title
Alt передаёт текстовый смысл изображения, а title может показываться как всплывающая подсказка. Если title повторяет alt или не добавляет полезной информации, его можно убрать.
На сенсорном экране подсказка title часто недоступна. Поэтому нельзя рассчитывать, что человек наведёт курсор и прочитает её.
Поведение скринридеров зависит от программы и настроек. Одни могут озвучить title, другие — пропустить или повторить alt. Title не подходит на роль основного текстового имени изображения.
Если title копирует alt, уберите повтор.
| Критерий | Атрибут alt | Атрибут title |
|---|---|---|
| Использование | Текстовая замена изображения; у декоративного изображения значение может быть пустым | Необязательная подсказка |
| Кто читает | Скринридер; браузер может показать при сбое загрузки | Может появиться при наведении курсора |
| Поиск | Может использоваться как описание изображения | Не заменяет alt |
| Сенсорный экран | Доступен вспомогательным технологиям | Подсказка часто не показывается |
| Повтор подписи | Не копируйте подпись дословно, если она уже объясняет изображение | Повтор alt не добавляет информации |
Для обычной карточки товара или иллюстрации в статье достаточно точного alt. Title пригодится, только если короткая подсказка сообщает дополнительный факт.
HTML, WCAG и ГОСТ
В теге img атрибут alt должен присутствовать, даже если его значение пустое. Запись alt="" подходит для изображения, которое не несёт отдельного смысла. Отсутствующий атрибут — другое состояние: у браузера и вспомогательных технологий нет текстовой замены.
Критерий WCAG 1.1.1 рассматривает текстовую альтернативу для нетекстового содержимого. Изображение получает описание по своей роли, а декоративный элемент можно скрыть от скринридера пустым значением alt. Точный вариант зависит от того, какую функцию выполняет картинка на странице.
ГОСТ Р 52872 упомянут в исходном материале без конкретной ссылки на документ и подтверждения его требований, поэтому утверждение о его содержании удалено. Для разметки страницы достаточно различать отсутствующий атрибут и пустой alt.
Отсутствующий alt и alt="" — разные решения: первое оставляет изображение без текстовой замены, второе может скрыть декор от скринридера.
Alt по типам картинок
Сначала решите, какую роль играет изображение: передаёт содержание, обозначает действие или украшает страницу. От этого зависит, что писать в alt и нужен ли ему текст вообще.
| Тип | Что указать в alt | Когда оставить пустым |
|---|---|---|
| Логотип | Название компании | Название уже есть рядом текстом |
| Товар в карточке | Модель, цвет и ракурс, которые видит покупатель | Обычно не оставляют пустым |
| Баннер-ссылка | Действие по клику | Если баннер декоративный и рядом есть ссылка с тем же назначением |
| Иконка интерфейса | Название действия | Если рядом есть текст кнопки |
| Фото в статье | Что изображено и как это связано с текстом | Если снимок только декорирует страницу |
| Инфографика | Краткий вывод; детали изложите рядом текстом | Если она не добавляет смысла |
| График | Что сравнивается и какой вывод показывает | Если рядом уже изложено то же самое |
| SVG через img | Описание по смыслу изображения | По его роли |
| CAPTCHA | Назначение проверки и доступный способ пройти её | Обычно не оставляют пустым |
| CSS-фон | У тега фона нет атрибута alt; нужный смысл передают текстом рядом | Атрибут неприменим |
Название компании важнее слова «логотип». Для товара укажите то, что помогает узнать его на странице: например, «Дверь эмаль белая, глухая, вид спереди». Перечень поисковых запросов вместо описания не помогает ни покупателю, ни скринридеру.
У CSS-фона нет атрибута alt. Если изображение несёт важный смысл, передайте его текстом рядом или используйте тег img. Это руководство про атрибут alt не применимо к фонам. В CAPTCHA alt не должен раскрывать символы с картинки: укажите назначение проверки и предусмотрите доступный способ пройти её.
Если картинка работает как ссылка или кнопка
Для картинки-ссылки alt называет действие, которое произойдёт по клику. «Открыть каталог» или «Скачать прайс» полезнее, чем «синяя стрелка» или «баннер».
Подпись figcaption уже может объяснять изображение. Тогда не повторяйте её в alt: укажите только недостающий смысл или действие, если картинка ведёт по ссылке.
Если у иконки в кнопке уже есть видимая подпись, оставьте один источник доступного имени. Иначе скринридер может произнести действие дважды.
Слабый вариант для баннера: «яркий баннер со скидкой на двери». Лучше: «Открыть каталог входных дверей».
Alt у картинки-ссылки объясняет действие, а не рисунок.
Если рядом есть текстовая ссылка с тем же назначением, а баннер только украшает блок, оставьте изображению пустой alt. Так действие не прозвучит дважды.
Как поиск читает alt: Яндекс.Картинки и Google Images
Google Search Central советует описывать изображения в alt и не набивать его запросами. Google Images может использовать альтернативный текст при понимании изображения. Сам по себе alt не гарантирует место в выдаче.
Для Яндекс.Картинок ориентируйтесь на официальную справку Яндекса. Имя файла, подпись страницы, alt и Open Graph — разные данные; адрес og:image задаёт картинку для публикации, но не заменяет alt в теге img.
Добавляйте в alt поисковую фразу только тогда, когда она естественно описывает изображение. Жёсткий лимит символов для этого текста не нужен: выберите короткую формулировку, которая сохраняет смысл.
Имя файла помогает находить картинку в проекте, подпись видна всем читателям, а alt доступен вспомогательным технологиям. Эти элементы дополняют друг друга и не должны копировать один и тот же текст.
Для товара укажите модель и видимый ракурс. Для иллюстрации в статье опишите сцену и её связь с абзацем. Если изображение не несёт отдельного смысла, оставьте alt пустым.
Как прописать alt в HTML и в CMS
Атрибут alt пишут в теге img рядом с src. У CSS-свойства background-image такого атрибута нет. Если изображение важно, передайте его смысл текстом или вставьте как img.
<img src="/images/hero.jpg" alt="Команда студии за макетом главной страницы">
<img src="/images/divider.svg" alt="">
<a href="/catalog/"><img src="/images/banner.jpg" alt="Открыть каталог дверей"></a>
В CMS ищите поле «альтернативный текст» у файла и у блока, который выводит изображение. Например, в карточке изображения в 1С-Битрикс значение файла и значение компонента могут настраиваться отдельно. Проверьте, какое из них попадает в опубликованный HTML.
После массовой загрузки проверьте alt: вместо описания может оказаться имя файла вроде «img-2048-hero-final». Такую подстановку нужно убрать или заменить осмысленным текстом.
Для каждой языковой версии подготовьте свой alt. Русскую фразу нельзя оставлять в английской версии страницы.
При разработке сайта предусмотрите поле alt в вёрстке и CMS: добавить его после массового наполнения сложнее. Это можно заложить на этапе разработки сайта.
Какие ошибки в alt мешают доступности и поиску
Ошибки возникают, когда смысловое изображение остаётся без описания, а декоративное получает лишний текст. Скринридер тогда пропускает нужную информацию или произносит ненужную.
Частые промахи — отсутствующий alt у содержательного изображения, пустое значение у важного фото, описание вроде «фото» без деталей и ключевые слова вместо смысла. Не оставляйте в alt имя файла или целый абзац: человеку будет трудно разобраться в описании.
Автоматические подписи к фото тоже требуют проверки. Система может ошибиться в цвете или повторить один шаблон для всей галереи. Сверяйте описание с самим изображением.
Как проверить alt до релиза и встроить проверку в работу
Перед публикацией проверьте и наличие атрибута, и точность его текста. Автоматическая проверка заметит пропуск, но не решит, правильно ли описано изображение.
Откройте исходный код страницы и проверьте изображения, которые выводят CMS, слайдеры и старые компоненты. Затем пройдите страницу со скринридером и послушайте, как звучат подписи в контексте.
Lighthouse может помочь найти изображения без alt. Для содержательных изображений всё равно нужна ручная проверка. Сверьте разметку с элементом img в HTML.
Распределите работу по ролям: автор контента описывает изображения, разработчик проверяет шаблоны, QA проходит страницу перед выпуском. Автоматически сгенерированные тексты оставляйте черновиками до вычитки.
На многоязычном сайте проверьте alt в каждой версии. Перевода текста страницы недостаточно, если описание изображения осталось на другом языке.
Короткий чек-лист перед публикацией
Пройдите страницу сверху вниз и проверьте изображения по их назначению. Если что-то не сходится, исправьте конкретную запись в CMS или шаблоне до публикации.
Для нового сайта предусмотрите поле альтернативного текста в вёрстке и CMS до наполнения. Так редакторам будет где задавать описание изображений.
Источники
- Элемент img — MDN Web Docs
- Картинки в поиске Google — Google Search Central
