Альтернативный текст при ошибках загрузки изображений

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

После добавления изображения в редакторе обратите внимание на боковую панель. Там расположена кнопка «alt«, при клике появится поле для ввода текста.

Добавьте текст описывающий изображение, чтобы пользователям у которых картинка не открылась по какой-либо причине, могли понять что было заложено в письмо.

По умолчанию альтернативный текст наследует базовые настройки браузера и может быть слабо заметен при нераскрывшемся изображении. Чтобы задать для alt-текста собственный стиль (выбрать шрифт, размер, цвет и отступы), воспользуйтесь следующей инструкцией:

• Перейдите в редактор кода. Это можно сделать, нажав на кнопку  «</>» на верхней панели.
• Найдите в коде  тег <img> для изображения, для которого вы хотите добавить alt-текст. (Если кликнуть на картинку в рабочей области редактора, то код автоматически покажет где находится нужный тег)
• Оберните тег <img> в тег <div> со стилями для текста.
• Настройте параметры в теге <div> в соответствии с вашим дизайном.

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

• font-family: Определяет шрифт, используемый для текста.
• font-size: Определяет размер текста в пикселях.
• ine-height: Определяет высоту строки (расстояние между базовыми линиями строк текста) в пикселях.
• color: Определяет цвет текста.

В итоге у вас должен получится вот такой код:

<div style="font-family: Helvetica, Roboto, Arial, sans-serif; font-size: 16px; line-height: 21px; color: #5a5a5a;">
  <img src="URL_ВАШЕГО_ИЗОБРАЖЕНИЯ" alt="Описание изображения">
</div>