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

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

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

### Содержание

— Стандарты доступного кодирования

— Доступное кодирование и скринридеры

— Чек-лист доступного кода электронной почты

— Как избежать ошибок в доступном кодировании электронной почты

— Кодирование для темного режима

— Кодирование интерактивных, доступных писем

— Как кодировать доступные таблицы для разметки писем

— Инструменты для доступного и инклюзивного кодирования

## Стандарты доступного кодирования

Email Markup Consortium недавно проанализировал более 400 000 писем и обнаружил, что 99,97% HTML-писем содержат проблемы с доступностью, которые мешают многим подписчикам читать письма. 🤯 Это практически каждое отправленное письмо! Как email-маркетологи, мы должны работать лучше.

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

Если вы не знаете, с чего начать в области доступного кодирования, пора изучить стандарты, такие как Руководство по доступности веб-контента (WCAG). Эти стандарты точно описывают, как кодировать письма, чтобы сделать их доступными для всех — не только то, что юридически требуется от вас в США и за рубежом.

Эти международно признанные стандарты описывают, как сделать веб-сайты, приложения и другие цифровые объекты доступными для людей с ограниченными возможностями. Хотя WCAG сам по себе не является законом, это широко признанное руководство по обеспечению доступности веб- и цифровых ресурсов для всех.

Доступность — это просто

Создание доступных писем больше не является опцией — это требование. Узнайте о влиянии доступности на бренды от двух отраслевых экспертов.

## Доступное кодирование и скринридеры

Когда мы думаем о доступном кодировании, большинство людей сразу же думает об оптимизации для скринридеров. Скринридер — это вспомогательное программное обеспечение, которое читает текст на экране компьютера (в данном случае, ваше письмо). Его чаще всего используют люди с нарушениями зрения, но любой, кто пользовался Amazon Alexa, Apple Siri или Google Assistant, уже использовал скринридер. По оценкам Всемирной организации здравоохранения, около 2,2 миллиарда человек имеют нарушения зрения, многие из которых считаются слепыми.

Что происходит, когда ваш код недоступен? Возьмем, к примеру, изображения. Без ALT-текста скринридеры не могут правильно описать изображение вслух.

Давайте посмотрим на простой заголовок письма из одного из наших писем. Этот заголовок содержит изображение логотипа Litmus без ALT-текста.

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

Аудиопроигрыватель

00:00

Используйте клавиши стрелок вверх/вниз для увеличения/уменьшения громкости.

Скринридеры в итоге выдают кучу непонятных букв из вашего кода. Это означает, что ваши подписчики, использующие скринридеры, должны разбираться в запутанных буквах и цифрах, пытаясь услышать ваше сообщение. Это не очень полезно, а основная часть письма даже не началась! Каковы шансы, что они откроют другое письмо после такого опыта? (Подсказка: Ноль.)

## Чек-лист доступного кода электронной почты

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

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

Ваши письма доступны?

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

### 1. Добавьте языковой код к вашему

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

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

Вот почему важно проверить ваш на наличие языкового кода — это простая выдержка кода, которая указывает язык вашего письма. Если его еще нет в вашем коде, добавьте lang=«xx», заменив xx на соответствующий языковой код для вашего письма. Ознакомьтесь с этим списком всех возможных языковых кодов и локалей — что позволяет учитывать разные акценты, например, различие между британским и американским английским.

Есть несколько особых случаев, которые следует учитывать:

— Если вы используете какой-либо XML в теге , вам также нужно будет добавить

**xml:lang=«xx»**.

— Если вы включаете исправление Outlook 120dpi в код вашего письма, вам потребуется это решение для указания языка. Вот как выглядит наш код с этим исправлением:

Профессиональный совет: можно динамически заполнять языковой код, если у вас настроена локализация в вашем ESP.

### 2. Всегда включайте ALT-теги для ваших изображений

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

«Если изображение конкретного продукта, а под ним заголовок — название продукта, то ваш alt-текст не должен быть просто названием продукта. В скринридере это будет звучать примерно так: «iPhone iPhone iPhone iPhone iPhone», что просто ужасно», — говорит Карин.

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

Есть случаи, когда следует добавить пустой ALT-тег: alt=«» к изображениям. Делайте это, когда:

— На ваших изображениях нет ALT-тегов.

— На самом изображении нет текста.

— Изображение является чисто декоративным и не добавляет смысла письму.

Если вы не включите пустой тег, скринридеры прочитают URL изображения — а никто не хочет, чтобы ему зачитывали длинный URL!

После того, как вы установили все ALT-теги — пустые или нет — для изображений в вашем письме, добавьте стилизацию шрифта в тег для стилизованного ALT-текста. Эта стилизация позволяет вам сделать ваш ALT-текст более нарядным и изменить внешний вид шрифта, цвет, размер, стиль и насыщенность.

### 3. Включите атрибут role=«presentation» ко всем элементам

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

Вот почему важно сообщить скринридеру, что вы используете таблицу только для целей разметки. Вы можете сделать это, добавив **role=«presentation» **к каждой таблице в вашем письме. Эта роль указывает скринридерам удалить любое семантическое значение из таблиц — поэтому вместо чтения номеров строк и столбцов, он фокусируется на содержимом.

Давайте посмотрим на этот очень простой заголовок письма из одного из наших писем:

До оптимизации для доступности наш код выглядел так:

«`

Заметили ли вы отсутствие ALT-атрибутов и то, что таблицы не установлены на **role=«presentation»**?

Эти небольшие упущения оказывают большое влияние на доступность. Вот как скринридер интерпретирует приведенный выше код:

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

А вот тот же код, который был переработан путем добавления атрибута **ALT=«»** и **role=«presentation»** к тегам **

** для удобства скринридеров:

«`

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

Как вы можете слышать, разница существенна!

#### Как кодировать доступные таблицы для разметки писем в Litmus

Если вы вынесете из этой статьи один аспект доступного кодирования, то это добавление role=presentation к вашим таблицам. Это драматически повлияет на вашу доступность и потребует очень мало времени.

«Это так важно, потому что это позволяет скринридерам знать, что им не нужно читать это как таблицу», — говорит Карин. «Я пришла в email-маркетинг из очень регулируемой отрасли, и все должно было выглядеть определенным образом, поэтому я часто использовала таблицы или маркированные списки в коде для этого. Оба эти случая важны для ARIA-меток, чтобы скринридер знал, что это на самом деле не предназначено для чтения таким образом».

Вот как это сделать в Litmus:

1. Сначала войдите в свою учетную запись Litmus и нажмите Litmus Builder. Выберите один из ваших шаблонов или начните кодировать свое письмо напрямую с помощью HTML.

2. При создании таблиц добавьте role=presentation.

3. Когда закончите, дважды проверьте свою работу на вкладке QA Checks в Builder. Litmus Accessibility Checker поможет вам выявить все, что вы упустили, с помощью десятков полезных проверок доступности.

4. Затем обновите вкладку Previews and QA, чтобы завершить процесс тестирования.

5. Отправьте! *счастливый танец*

### 4. Используйте семантические элементы для структурирования вашего контента

Семантические элементы облегчают выделение иерархии контента, показывая подписчикам (и скринридерам), что является заголовком, а что — обычным текстом. Включение семантических элементов дает вашим подписчикам, использующим скринридеры, возможность легче «сканировать» письмо.

При двойной проверке вашего текста убедитесь, что любой текст, достойный заголовка, заключен в тег ****: