Как писать alt‑текст для изображений: доступность и SEO

Alt‑текст делает изображения доступными людям с нарушениями зрения и улучшает индексирование в поисковых системах. Пишите короткие, информативные и естественные описания: перечисляйте главное, добавляйте контекст и используйте ключевые слова аккуратно. Для декоративных изображений оставляйте поле пустым.

Важно: этот материал даст понятные правила, шаблоны и готовые чеклисты для разных ролей — авторов контента, маркетологов и разработчиков.

Зачем нужен alt‑текст

Alt‑текст (альтернативный текст) — это краткое текстовое описание изображения. Определение: краткая строка, которую экранные читалки используют для передачи содержания изображения людям с нарушениями зрения.

Основные причины, почему alt‑текст важен:

• Доступность. Экранные читалки читают alt‑текст вместо изображения, помогая незрячим и слабовидящим людям понимать визуальный контент.
• Надежность при плохом интернете. Если изображение не загрузилось, посетитель увидит alt‑текст вместо пустого пространства.
• SEO. Поисковые боты используют alt‑текст, чтобы понять содержание изображения и связать его с релевантными страницами запросов.
• Социальные сети и внутренняя индексация. Многие платформы позволяют добавлять alt‑текст для публикаций, расширяя охват аудитории.

Важно

Alt‑текст — не место для рекламы и перенасыщения ключевыми словами. Его задача — описать, а не продавать.

Современное использование alt‑текста

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

На сайтах и в CMS

Поля alt доступны в большинстве редакторов: WordPress, Wix, Drupal и другие. Добавление осмысленного alt‑текста к изображениям повышает шанс попадания в картинковую выдачу и помогает пользователям с проблемами зрения.

Что можно описывать:

• Фотографии и иллюстрации.
• Фоновые изображения, если они несут смысловую нагрузку.
• Инфографику и диаграммы — обязательно с пояснением главной идеи.
• Логотипы — название бренда и назначение.

Когда alt не нужен:

• Декоративные элементы, повторяющие визуальный стиль, лучше пометить как декоративные и не заполнять alt‑поле.

В социальных сетях и мобильных приложениях

Facebook, Instagram, Twitter и другие позволяют добавить alt при загрузке изображения. Заполнение поля улучшает охват и делает посты доступнее для всех пользователей.

В офисных приложениях и презентациях

Microsoft PowerPoint, Google Slides и Word поддерживают alt‑текст. В презентации каждое изображение, график и диаграмма должны иметь краткое пояснение, чтобы участники с экранными читалками получили полноценный опыт.

Экранные читалки и как они работают с alt‑текстом

Экранные читалки, такие как Microsoft Narrator, NVDA и VoiceOver, читают alt‑текст, когда встречают изображение. Если alt не задан, читалка может озвучить имя файла или сообщить «изображение», что не информативно.

Совет

Тестируйте контент с экранной читалкой. Это даст реальное представление о том, как воспринимается ваш сайт.

Принципы хорошего alt‑текста

Ниже — практические правила, объяснения и примеры.

1. Делайте alt‑текст читабельным

Опишите изображение понятным языком. Структура должна быть похожа на предложение. Пример плохого alt: “car building street busy”. Пример хорошего alt: “синий седан припаркован перед офисным зданием на оживлённой улице”.

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

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

2. Краткость и релевантность

Оптимальная длина — 5–20 слов. Длинные описания подойдут для сложных графиков, но обычно достаточно одного предложения. Каждый дополнительный элемент описания должен нести смысл.

Примеры:

• Простая фотография товара: «чёрные кожаные ботинки на белом фоне».
• Рекламный баннер: «менеджер в чёрном кресле RelaxPro, улыбается, держит кружку».
• Диаграмма: «столбчатая диаграмма роста продаж по кварталам, пик в третьем квартале».

3. Описывайте содержание, а не формат

Не начинайте с «изображение», «фотография» или «картинка». Экранные читалки уже понимают, что это изображение.

Плохо: “изображение: логотип компании”. Хорошо: “логотип компании GreenWave: стилизованная волна зелёного цвета”.

4. Добавляйте контекст, если он значим

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

5. Используйте ключевые слова естественно

Ключевые слова можно включать, но только если это органично. Не повторяйте одно и то же словосочетание в каждом alt‑поле — это выглядит как спам.

Стратегия:

• Выберите первичный и 1–2 вторичных ключа для страницы.
• Используйте их в alt там, где они естественны и уместны.

6. Решайте, где alt не нужен

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

Шаблоны и примеры alt‑текста

Готовые форматы, которые можно адаптировать под разные ситуации.

Шаблоны для продукта:

• “[цвет] [тип товара] на [фон/контекст], вид спереди” — например, “красное платье на манекене, вид спереди”.
• “[бренд] [модель], [ключевая функция]” — например, “наушники StormPro, шумоподавление”.

Шаблоны для людей и событий:

• “[имя/роль], [что делает], [контекст]” — например, “дизайнер на рабочем месте рисует макет на планшете”.

Шаблоны для диаграмм и инфографики:

• “[тип диаграммы], показывает [основная идея], ключевые точки: [список коротких пунктов]” — например, “линейный график, показывает рост посещаемости сайта с января по июнь, пик в мае”.

Шаблоны для логотипов:

• “логотип [название компании], [краткое описание стиля]” — например, “логотип EcoPack, зелёный лист в круге”.

Чеклист перед публикацией

Используйте этот чеклист для каждой страницы или поста:

• Есть ли у каждого значимого изображения alt‑текст?
• Короткий ли текст (1 предложение) и понятный?
• Дает ли он контекст, если изображение связанo с содержимым страницы?
• Не содержит лишней SEO‑оптимизации или повторов?
• Протестирован ли результат с экранной читалкой?
• Помечены ли декоративные изображения как декоративные?

Важно

Тестирование с реальными пользователями и с экранными читалками — лучший способ убедиться, что вы всё сделали правильно.

Роли и обязанности: кто отвечает за alt‑текст

Распределение задач в команде помогает соблюдать стандарты.

Контент‑менеджер

• Пишет alt‑текст для новых материалов.
• Проверяет соответствие стилевым правилам.

Маркетолог

• Утверждает ключевые слова, которые можно включать в alt‑текст.
• Обеспечивает согласованность бренд‑тона.

Дизайнер

• Помечает декоративные изображения как таковые.
• Передаёт контекст для сложных иллюстраций и инфографики.

Разработчик

• Обеспечивает, чтобы CMS позволяла задавать alt и помечать декоративные изображения.
• Тестирует поддержку для экранных читалок.

Мини‑методология: процесс добавления alt‑текста

1. Определите цель изображения: информировать, пояснять, украшать.
2. Если украшение — оставьте alt пустым и пометьте как декоративное.
3. Если информативно — сформулируйте одно предложение с контекстом.
4. Включите ключевое слово, если это естественно и уместно.
5. Проверьте текст с чеклистом выше и прогоните страницу через экранную читалку.

Примеры ошибок и когда alt‑текст вреден

Ошибки, которых следует избегать:

• Перенасыщение ключевыми словами. Это ухудшает опыт пользователей и может выглядеть как спам.
• Описания внешнего вида без смысла. Например, “фото1.jpg” или “картинка”.
• Слишком общий текст: “продукт” вместо конкретики.

Когда alt может навредить:

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

Контрпример

Вместо “новая модель 2025 со скидкой” напишите описание, что действительно изображено: “новая модель часов ChronoX с кожаным ремешком и римскими цифрами на циферблате”.

Кейсы и сценарии: типичные задачи и решения

Сценарий 1: Интернет‑магазин

Задача: тысячи карточек товаров. Решение: шаблонный alt, генерируемый автоматически, плюс ручной контроль для топ‑товаров. Пример шаблона: “[бренд] [модель], [цвет], [ключевая характеристика]”.

Сценарий 2: Новости и блоги

Задача: фотографии событий и интервью. Решение: описывать основные элементы кадра и указывать связь с текстом. Пример: “журналистка Ирина Петрова берёт интервью у министра на конференции по экологии”.

Сценарий 3: Научные публикации

Задача: сложные диаграммы и графики. Решение: в alt указать краткую идею графика, а под изображением дать расширенное текстовое описание с деталями.

Критерии приёмки

Для релиза страницы убедитесь, что:

• Все значимые изображения имеют alt, соответствующие чеклисту.
• Декоративные изображения помечены и не читаются экранными читалками.
• Текст прогнан через экранную читалку, минимум один человек с опытом доступности подтвердил удобство.

SOP: пошаговый шаблон для команды

1. При загрузке изображения автор пишет alt согласно шаблону.
2. Рецензент проверяет текст и при необходимости редактирует.
3. Маркетолог проверяет использование ключевых слов.
4. Разработчик подтверждает техническую корректность полей в CMS.
5. Перед публикацией тест на экранной читалке и на мобильных устройствах.

Пример готового workflow в Markdown

• Изображение: товар.jpg
• Alt: “синяя беговая куртка AeroFit, водоотталкивающая ткань, модель идёт по тропе”
• Дополнительное описание под изображением: “куртка AeroFit — сезонная коллекция 2026, доступна в размерах S–XL”

Проверочные тесты и принятие

Тесты, которые нужно выполнить:

• Автоматическая проверка CMS: поле alt заполнено для всех non‑decorative изображений.
• Ручная проверка: 10 страниц случайным образом, оценка читабельности alt.
• Функциональный тест: откройте страницу с отключёнными изображениями и прочитайте alt глазами пользователя.

Критерии успеха:

• 95% значимых изображений имеют осмысленный alt.
• Нет жалоб от пользователей с нарушениями зрения после релиза.

Ментальные модели и эвристики

Эвристика 1: Представьте, что вы объясняете изображение устно человеку по телефону.

Эвристика 2: Сначала описывайте главное, затем детали.

Эвристика 3: Если изображение поддерживает действие (кнопка, интерактивный элемент), в alt укажите действие: “кнопка: скачать отчёт”.

Альтернативные подходы

• Автогенерация + ручная корректировка. Машинное описание даёт старт, человек правит детали.
• Full manual для ключевых страниц и продуктов; автоматизация для массового контента.

Решение спорных случаев

Если описать изображение точно, но это раскрывает лишнюю информацию, рассмотрите следующие варианты:

• Обрезать изображение так, чтобы скрыть чувствительные данные, и дать безопасный alt.
• Поместить расширенное описание в закрытый раздел с контролем доступа.

Визуальная галерея пограничных кейсов

• Сложная инфографика: краткий alt + развернутый текстовый блок под изображением.
• Скриншоты интерфейса: в alt описать целевое действие, а не все мелкие элементы.

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

Диаграмма принятия решения

flowchart TD
  A[Нужно ли изображение?] -->|Да| B[Имеет смысловое содержание?]
  A -->|Нет| Z[Пометить как декоративное; alt пустой]
  B -->|Нет| Z
  B -->|Да| C[Можно ли кратко описать в 1 предложении?]
  C -->|Да| D[Написать короткий alt и добавить контекст на странице]
  C -->|Нет| E[Написать краткий alt; добавить расширенное текстовое описание под изображением]
  D --> F[Тест с экранной читалкой]
  E --> F
  F --> G{Прошел тест?}
  G -->|Да| H[Готово]
  G -->|Нет| I[Редактировать alt/контент и повторить]

Короткий словарь терминов

• Alt‑текст: краткое текстовое описание изображения.
• Декоративное изображение: элемент без смысловой нагрузки.
• Экранный читалка: ПО, которое озвучивает содержимое экрана для незрячих.

Риски и рекомендации по их снижению

Риски:

• Неправильный alt создаёт недоступный опыт.
• Чрезмерная оптимизация под SEO ухудшает читаемость.
• Утечка конфиденциальных данных через alt.

Митигаторы:

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

Краткое резюме

Alt‑текст — простой и мощный инструмент доступности и SEO. Пишите ясные и короткие описания, учитывайте контекст и помечайте декоративные изображения. Внедрите стандарты и тестирование с экранными читалками, чтобы обеспечить качественный пользовательский опыт.

Важно

Регулярно пересматривайте политику alt‑текста и адаптируйте шаблоны под изменяющиеся цели бизнеса и требования пользователей.

Быстрое объявление для команды (100–200 слов)

Добавьте описательные alt‑тексты ко всем значимым изображениям в нашей CMS. Для массового контента используйте шаблон: “[бренд] [описание объекта], [ключевая характеристика]”. Помечайте декоративные изображения как декоративные. Перед публикацией прогоняйте страницы через экранную читалку и отмечайте результаты в карточке задачи. Это повысит доступность, улучшит индексирование и расширит охват нашей аудитории.