Как добавить Alt текст к изображениям

0

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

Обратите внимание:

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

О замещающем тексте (alt text)

Альтернативный или замещающий текст — это краткое описание изображения в вашей кампании, которое отображается в том случае, если подписчики не могут получить доступ к картинке. Это может произойти, если у получателя отключены изображения в почтовом клиенте или он просматривает письмо с помощью программы чтения с экрана. Альтернативный текст помогает подписчикам понять степень важности изображения — стоит ли его смотреть или оно просто является декоративным украшением письма. 

Alt текст и специальные возможности

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

Без альтернативного текста программа чтения с экрана сообщит получателю о наличии изображения, но он не может определить, какую информацию оно содержит. 

Отображение alt текста и изображений

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

Вот как выглядит alt текст, когда изображения заблокированы.

Это изображение не содержит alt текст.

Это изображение содержит alt текст.

Советы, которые помогут повысить эффективность alt текста

Вот несколько советов, которые помогут вам написать подходящий и эффективный замещающий текст:

  • Короткие фразы. Альтернативный текст должен быть легко читаемым и перевариваемым, чтобы подписчики могли перейти к остальной части вашего письма. Стремитесь к одному или двум предложениям.
  • Использование правильной пунктуации. Программы чтения с экрана используют пунктуацию, чтобы знать, где сделать паузу при чтении контента. Именно поэтому важно использовать правильную пунктуацию в замещающем тексте.
  • Не используйте кавычки. Атрибут alt, добавляемый в необработанный HTML-код кампании, использует кавычки, чтобы определить, где начинается и заканчивается ваш фактический альтернативный текст. Дополнительные кавычки вызовут ошибки в HTML.
  • Повторение текста, отображаемого в изображениях. Важную информацию лучше размещать в основном тексте сообщения, а не в изображении. Но, если изображение содержит текст, повторите эту информацию в альтернативном тексте, чтобы подписчики не пропустили ее.
  • Не повторяйте подписи к изображениям. Подписи к изображениям озвучиваются программами чтения с экрана и отображаются, даже если картинки заблокированы. Поэтому не делайте одинаковых подписей в замещающем тексте. Альтернативный текст должен содержать информацию о изображении, которую подписчик не может получить только по короткой подписи.
  • Учитывайте контекст. Контекст — это самая важная вещь, которую следует учитывать при написании замещающего текста для изображения. Как оно соотносится с окружающим его контентом? Спросите себя, какая информация у ваших подписчиков уже есть об изображении на основе окружающего его контента.
  • Определите декоративные картинки. Если ваше изображение не несет смысловой нагрузки, то кратко укажите это в замещающем тексте. Тогда подписчики смогут перейти от картинки к остальной части вашего письма. Например, просто напишите «Декоративное изображение».
  • Протестируйте письмо. Некоторые почтовые клиенты не отображают замещающий текст для связанного изображения или если он превышает ширину картинки. Отправляйте тестовые письма на различные почтовые клиенты. Отключите в них изображения, чтобы узнать, как будет отображаться ваш замещающий текст.

Как добавить alt текст к изображениям

Есть несколько разных способов добавить замещающий текст к изображениям в Mailchimp, и метод, который вы используете, зависит от того, где находится ваше изображение:

  • Из контент блока изображения
  • Из текстового контент блока
  • В шаблонах с настраиваемым кодом

Из контент блока изображения

Чтобы добавить замещающий текст в контент блоке изображения  (изображение, группа изображений, карточка изображения или изображение + заголовок), выполните следующие действия:

  1. В разделе “Контент” (Content) конструктора кампаний нажмите “Редактировать дизайн” (Edit Design).
  2. На шаге “Дизайн” (Design) нажмите на блок изображения, с которым хотите работать.
  3. На панели редактирования нажмите Alt.
  4. В поле Image Alt-Text, введите альтернативный текст для изображения.
  5. Нажмите “Обновить” (Update).
  6. Нажмите “Сохранить и закрыть” (Save & Close).

Из текстового контент блока

Чтобы добавить замещающий текст к изображению в текстовом контент-блоке, выполните следующие действия:

  1. В разделе “Контент” (Content) конструктора кампаний нажмите “Редактировать дизайн” (Edit Design).
  2. На шаге “Дизайн” (Design) нажмите на блок изображения, с которым хотите работать.
  3. Дважды нажмите на изображение, чтобы открыть Content Studio.
  4. Нажмите “Показать параметры стиля изображения” (show image style options).
  5. В поле Alt text, введите альтернативный текст для изображения.
  6. Нажмите “Сохранить и вставить изображение” (Save & Insert Image).
  7. Нажмите “Сохранить и закрыть” (Save & Close).

В пользовательских шаблонах

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

Ваш код должен выглядеть примерно так.

Если у вас есть вопросы по Mailchimp, email маркетингу и написанию текстов для рассылок, запишитесь на консультацию.