Alt-текст для изображений сайта: как описать смысл и действие
Alt-текст выбирают по назначению изображения на конкретной странице. Фотография может показывать важную деталь товара, значок — открывать каталог, а фон — только оформлять блок. Если дать всем трём одинаковое описание, посетитель получит лишние слова и может потерять нужное действие.
Начните с вопроса: что потеряется без изображения
Alt — текстовая альтернатива изображения. В обычной HTML-разметке её задаёт атрибут alt у элемента img. Она помогает передать смысл изображения, в том числе людям, которые используют программу чтения с экрана. Для редактора первый шаг — определить роль картинки в окружающем содержании.
Откройте всю страницу: заголовок, абзац, подпись, ссылку и соседние элементы. Затем сформулируйте, какую информацию или возможность добавляет изображение. Ответ «украшает раздел» ведёт к одному решению, «показывает расположение отделений товара» — к другому.
Не начинайте с массовой команды «заполнить все пустые поля». Среди них могут оказаться и пропущенные описания, и намеренно пустые альтернативы декоративных изображений. Для исправления нужно различать эти ситуации.
Ниже используется учебный каталог настольных органайзеров. Модель М-04, файлы, размеры, адреса страниц и записи проверки вымышлены. Описания кадров заданы условиями примера; перед применением формулировок к своему сайту нужно посмотреть фактическое изображение. Это не фотографии продукции или результаты клиентского проекта Salestudia.
Разделите alt, видимую подпись и имя файла
Эти поля относятся к одному изображению, но решают разные задачи. Перенос одного текста во все поля без проверки часто создаёт повторы или оставляет важное объяснение недоступным.
| Поле | Практическая задача | Учебный пример |
|---|---|---|
| Alt | Передать нужный смысл изображения в данном месте | «Три отделения М-04: широкое слева и два узких справа» |
| Видимая подпись | Объяснить изображение читателям страницы | «Модель М-04, вид сверху» |
| Имя файла | Помочь команде найти и различить исходник | m04-top-blue.webp |
| Текст ссылки или кнопки | Назвать переход либо действие | «Открыть каталог органайзеров» |
В подписи можно объяснить происхождение материала: фотография, схема, монтаж или визуализация. Существенная оговорка должна быть доступна читателю там, где она влияет на понимание. Не прячьте такое объяснение только в техническом поле изображения.
Имя файла удобно сделать понятным редактору, но оно не заменяет подготовленную альтернативу. По названию m04-top-blue.webp нельзя надёжно восстановить расположение отделений или назначение картинки на странице.
Не переносите в alt стоимость, наличие и условия доставки просто потому, что они относятся к товару. Эти сведения должны оставаться в основном содержании и обновляться вместе с предложением. Если цена написана только внутри рекламного изображения, сначала решите, как сделать её доступной в тексте страницы.
Для фотографии выберите значимую деталь
W3C рекомендует передавать смысл информативного изображения в его контексте. Это не обязательно подробная опись каждого предмета в кадре. Выберите то, ради чего фотография добавлена к странице.
В учебном кадре М-04 показан сверху: широкое отделение находится слева, два узких — справа. Если страница объясняет внутреннюю организацию, такая деталь полезна. Общая фраза «красивый органайзер для офиса» не передаёт её.
Не дописывайте по внешнему виду материал, страну изготовления или качество. Синий предмет на снимке не доказывает конкретный оттенок покрытия, а похожая на древесину поверхность — породу дерева. Подтверждённые характеристики берут из данных товара; визуальное описание не должно создавать новое обещание.
Для серии кадров определите задачу каждого: общий вид, внутренняя часть, механизм или комплектация. Не размножайте один общий текст на десять разных фотографий. Если дополнительный кадр ничего не объясняет, сначала оцените необходимость его размещения.
Один файл может требовать разных решений
Представим, что один и тот же учебный файл с видом М-04 сверху используется в нескольких местах. Решение зависит от соседнего текста и поведения элемента. Таблица ниже предполагает обычную разметку без дополнительного имени, заданного через ARIA.
| Место использования | Что изображение добавляет | Решение |
|---|---|---|
| Галерея: подпись только «Вид сверху» | Расположение отделений ещё не описано | Alt передаёт широкое отделение слева и два узких справа |
| Блок, где полный смысл кадра уже изложен рядом | Самостоятельной новой информации нет; изображение не интерактивно | Можно использовать пустой alt после проверки контекста |
| Изображение — единственное содержимое ссылки на карточку М-04 | Позволяет открыть товар | Alt называет назначение ссылки, например «Органайзер М-04» |
| Одна ссылка содержит картинку и текст «Органайзер М-04» | Картинка не добавляет нужной информации к имени этой ссылки | Пустой alt предотвращает лишнее повторение |
Последняя строка относится именно к одной общей ссылке. Если картинка и название товара сделаны двумя отдельными ссылками, нельзя автоматически оставить первую без доступного имени. Структуру проверяют на опубликованной странице, а не по внешнему сходству макета.
Для редакционного задания запишите размещение вместе с файлом. Формулировка «alt для m04-top-blue.webp» без адреса страницы и роли элемента неполна. При повторном использовании файла первоначальное решение нужно пересмотреть.
Пустой alt и отсутствующий alt — разные состояния
Для декоративного изображения в элементе img W3C рекомендует пустое значение alt="". Так вспомогательные технологии могут пропустить его. Если атрибут вообще отсутствует, некоторые программы чтения с экрана могут произнести имя файла вместо полезного содержания.
В этом учебном фрагменте полоса только оформляет раздел. Текст «декоративная полоса» не нужно переносить в alt: он объясняет пример человеку, читающему код. Пустое значение записывают без пробела между кавычками.
Проверьте, что редактор сайта действительно сохраняет намеренно пустой alt. Некоторые рабочие процессы могут подставлять туда название файла или заголовок материала. Решение подтверждают в результирующей разметке, а не наличием пустого поля в административной форме.
Не объявляйте декоративным изображение только потому, что его трудно описать. Значимая схема, фотография особенности или единственная картинка в ссылке требует отдельного решения. Пустой alt должен следовать из роли изображения.
<!-- Декоративная полоса: не передаёт информацию и не является ссылкой -->
<img src="/images/section-line.svg" alt="">У ссылки и кнопки должно быть понятное действие
Если изображение само обозначает действие, его альтернатива должна помогать понять это действие. Для значка, открывающего каталог, важен переход в каталог, а не описание формы значка. Когда действие уже названо текстом внутри той же ссылки, повтор может быть лишним.
В учебном коде имя ссылки задаёт её видимый текст. Картинка служит дополнением. Если убрать span при изменении дизайна, нужно снова проверить доступное имя: прежнее решение для изображения уже нельзя считать достаточным.
Не путайте картинку товара и кнопку увеличения фотографии. Если клик открывает увеличенный кадр, пользователю нужно понять именно это действие. Формулировка для перехода на товар в таком месте будет вводить в заблуждение.
В проекте могут применяться и другие способы задания доступного имени, например ARIA. Тогда разработчик проверяет весь элемент и итоговое имя. Указанные фрагменты показывают простые случаи с img и не заменяют проверку компонентов конкретного сайта.
<a href="/catalog/">
<img src="/images/catalog.svg" alt="">
<span>Открыть каталог органайзеров</span>
</a>Не пытайтесь уместить сложную схему в одну фразу
Для сложного изображения W3C описывает сочетание короткой альтернативы и полного текстового представления существенных сведений. Короткая часть помогает узнать схему, а подробности можно разместить в обычном тексте или доступной таблице рядом.
Допустим, учебный чертёж М-04 содержит внешние размеры 240 × 120 × 80 мм, подписи сторон и размеры отделений. Alt «Размерная схема органайзера М-04; значения приведены в таблице ниже» подходит только если такая таблица действительно существует и содержит существенные данные чертежа.
В таблице нужно назвать измеряемые стороны, единицы и связь значений с вариантом товара. Если изображение передаёт дополнительные отношения, ограничения или порядок действий, одних чисел может быть недостаточно. Проверьте, что читатель может получить тот же нужный вывод из текста.
Название «схема размеров» сообщает тип материала, но не сами размеры. А длинная последовательность всех чисел внутри alt неудобна для сравнения. Распределите содержание так, чтобы его можно было прочитать, найти повторно и сопоставить.
Отредактируйте текст без искусственной длины
Пишите настолько кратко, насколько позволяет назначение изображения. В рекомендациях W3C основной ориентир — смысл и лаконичность, а не заполнение фиксированного числа символов. Важное ставьте в начале; длинное объяснение лучше вынести в подходящий текстовый блок.
Обычно не нужно начинать с «картинка» или «изображение». Однако тип материала бывает существенным: фотографию реального образца и условную схему нельзя всегда описывать как одно и то же. Оставляйте такое уточнение, если оно помогает правильно понять содержание.
Прочитайте вариант вместе с соседним абзацем. Уберите механический повтор заголовка и слова, которые ничего не добавляют. Затем проверьте, не исчезла ли важная деталь. Цель редактирования — понятная альтернатива, а не просто самый короткий текст.
Не превращайте описание в перечень поисковых фраз, городов и услуг. Упоминайте бренд или место, когда они относятся к смыслу конкретного изображения. Одинаковая коммерческая строка под всеми фотографиями не помогает различить кадры.
Автоматически подготовленный текст рассматривайте как черновик. Сверьте его с файлом, назначением изображения и подтверждёнными характеристиками. Если система придумала число отделений или назвала неустановленный материал, исправьте это до публикации.
Передайте редактору заполненную карточку изображения
Для небольшой страницы достаточно общей таблицы. Важна не сложность инструмента, а связь между файлом, местом размещения, решением и проверкой. Ниже — полностью заполненное учебное задание на один кадр.
| Поле | Запись |
|---|---|
| Страница и блок | /catalog/m-04/ — первый кадр галереи |
| Файл | m04-top-blue.webp |
| Условие примера | Вид сверху: одно широкое отделение слева, два узких справа |
| Соседний текст | Подпись «Модель М-04, вид сверху»; расположение отделений не описано |
| Роль | Информативная фотография без собственного действия |
| Alt | Три отделения М-04: широкое слева и два узких справа |
| Ответственные | Редактор сверяет смысл; разработчик проверяет вывод на странице |
| Статус | Решение подготовлено; проверка в реальном шаблоне ещё не выполнена |
Файлы и адреса в карточке условные, их нельзя считать существующими страницами Salestudia. Для своего каталога добавьте точное размещение и фактический результат проверки. Если один файл используется в разных компонентах, заведите отдельную строку для каждого контекста.
Такую карточку удобно передать вместе с материалами для макета. Разработчику будет понятно, какие слова должны попасть в alt, какая подпись остаётся видимой и какое действие предусмотрено. Это снижает число решений, которые иначе пришлось бы угадывать при сборке страницы.
Проверьте результат в работающей странице
Проверка состоит из двух частей: редактор оценивает смысл, технический специалист — то, как он передан в компоненте. Одного заполненного поля в медиатеке недостаточно.
| Сценарий | Что проверить | Условие приёмки |
|---|---|---|
| Информативный кадр | Файл, соседний текст и alt соответствуют друг другу | Значимая деталь описана без выдуманных свойств |
| Декоративный элемент | В разметке есть намеренно пустой alt | Элемент не добавляет ненужного имени при чтении |
| Изображение-ссылка | Итоговое доступное имя и фактическое назначение | Понятно, какой переход произойдёт |
| Ссылка с картинкой и текстом | Читается ли имя без ненужного повтора | Назначение понятно и после изменения оформления |
| Схема или график | Доступна ли существенная информация в тексте | Можно получить нужные данные без чтения картинки |
| Новый кадр или перевод | Сохранилось ли соответствие файла и текста | Описание относится к текущему изображению и языку страницы |
Для интерактивного элемента отдельно проверьте переход с клавиатуры и имя, которое доступно программе чтения с экрана. Видимая картинка, корректный alt и работающая ссылка — связанные, но разные условия. Если имя переопределяется компонентом, ошибка может находиться не в подготовленной фразе.
Автоматическая проверка помогает найти часть пропусков, однако наличие атрибута не подтверждает качество его содержания. Текст «фото» формально существует, но может ничего не сообщать. Пустое значение тоже нельзя объявить ошибкой без оценки роли.
Запишите среду и результат: какая страница проверена, какой компонент, какое замечание осталось. Не отмечайте полноценную проверку программой чтения с экрана, если вы только просмотрели HTML. Незавершённые проверки должны оставаться видимыми в задаче.
Возвращайтесь к alt после замены изображения
Альтернатива относится к текущему файлу в текущем контексте. После замены фотографии или изменения действия ссылки прежний текст может стать неверным, даже если технически поле продолжает выводиться.
В учебном каталоге новый кадр может показывать органайзер сбоку. Старое описание трёх отделений сверху уже не соответствует тому, что размещено. Обновите карточку материала вместе с файлом, а затем повторите нужные проверки.
Для языковой версии сверяйте изображение, подпись и описание как один комплект. Если на новом кадре другой вариант товара или переведённые обозначения, одного перевода прежнего alt недостаточно. Названия модели и числовые данные должны совпадать с текущим предложением.
Включите это в обычную задачу обновления контента: заменить файл, пересмотреть роль, проверить текст и действие. Тогда alt не останется забытым полем, которое живёт отдельно от страницы.
С чего начать на своём сайте
Выберите одну страницу услуги или товара и разберите пять разных элементов: основное фото, дополнительный кадр, декоративное изображение, ссылку с картинкой и схему. Для каждого запишите назначение и нужный результат проверки.
Salestudia — веб-студия из Idstein, Германия — создаёт сайты для бизнеса, связывая структуру, материалы и действия посетителя. При подготовке сайта полезно заранее согласовать подписи, текстовые альтернативы и проверку компонентов. Состав работ фиксируется в проекте; заполнение alt само по себе не является полной проверкой доступности сайта.
Официальные и профильные ссылки
Эти материалы дают контекст для данных, правил и рекомендаций на странице.
- W3C WAI — дерево решений для alt Источник проверен: 26.10.2026
- W3C WAI — информативные изображения Источник проверен: 26.10.2026
- W3C WAI — декоративные изображения Источник проверен: 26.10.2026
- W3C WAI — функциональные изображения Источник проверен: 26.10.2026
- W3C WAI — сложные изображения Источник проверен: 26.10.2026
- W3C WAI — советы по текстовым альтернативам Источник проверен: 26.10.2026
Часто спрашивают
Ответы уточняют объём работ, роли, зависимости и способ оценки результата.
Нужно ли обязательно заполнять alt у каждой картинки?
Для обычного img важно различать содержательную альтернативу и намеренно пустое значение. Декоративному изображению может требоваться alt="". Отсутствующий атрибут — другое состояние.
Можно ли копировать видимую подпись в alt?
Иногда формулировки будут близки, но сначала проверьте, что добавляет изображение. Полный повтор уже доступного текста может оказаться лишним, а короткая подпись — не передавать нужную визуальную деталь.
Что писать для картинки, по которой можно перейти?
Проверьте назначение перехода и доступное имя всей ссылки. Если картинка — её единственное содержимое и других способов именования нет, альтернатива должна обозначать назначение ссылки.
Есть ли обязательная длина в 125 символов?
Не используйте это число как универсальный критерий. Подготовьте краткий текст по назначению изображения; если нужна подробная информация, разместите полноценное описание рядом или по понятной ссылке.
Достаточно ли alt для сложной размерной схемы?
Краткое описание помогает узнать схему, но существенные значения и связи должны быть доступны в полноценном текстовом представлении. Проверьте, что оно действительно присутствует.
Удобнее написать напрямую?
Коротко укажите компанию, рынок и задачу — так разговор будет предметнее.