Как email-маркетологи, мы все стремимся доставлять отличные письма в «Входящие» наших подписчиков. Мы проводим спам-тесты и тестирование писем, чтобы убедиться, что наш дизайн корректно отображается на всех устройствах и в почтовых клиентах.
Сотни часов, затраченные на дизайн и текст письма, обесцениваются, если ваш код делает письмо недоступным для чтения. Доступность — это основа email-дизайна, ведь без нее часть ваших подписчиков не сможет увидеть или нажать на элементы письма. Это делает невозможным совершение целевого действия и, что еще хуже, создает для пользователей крайне негативный опыт.
Если вы только начинаете делать код своих писем более доступным, это может показаться сложной задачей. Но есть несколько простых приемов, которые можно легко внедрить, и они окажут огромное влияние на доступность ваших рассылок.
### Содержание
— Стандарты верстки для доступности
— Доступная верстка и программы чтения с экрана (скринридеры)
— Чек-лист доступного кода письма
— Как избежать ошибок при верстке доступных писем
— Верстка для темной темы
— Верстка доступных интерактивных писем
— Как верстать доступные таблицы для макетов писем
— Инструменты для создания доступного и инклюзивного кода
## Стандарты верстки для доступности
Консорциум Email Markup недавно проанализировал более 400 000 писем и обнаружил, что 99,97% HTML-писем содержат проблемы с доступностью, которые мешают многим подписчикам их прочитать. 🤯 Это касается практически каждой рассылки! Как email-маркетологи, мы должны работать лучше.
«Чаще всего об доступности я слышу, что ‘никто не смотрит мои письма с отключенными изображениями’ или ‘никто не использует скринридеры’, но это неправда», — говорит Карин Слейтер, эксперт по email-маркетингу. — «Когда кто-то подписывается на вашу рассылку, это похоже на приглашение в их дом. Вы должны уважать людей такими, какие они есть. Именно в этом и заключается суть доступности».
Если вы не знаете, с чего начать, пришло время изучить стандарты, такие как Руководство по обеспечению доступности веб-контента (WCAG). Эти стандарты четко описывают, как верстать письма, чтобы они были доступны каждому, а не только исходя из юридических требований в США или других странах.
Эти международно признанные стандарты описывают, как сделать веб-сайты, приложения и другие цифровые продукты доступными для людей с ограниченными возможностями. Хотя WCAG не является законом как таковым, это широко признанное руководство по созданию доступной цифровой среды для всех.
## Доступная верстка и программы чтения с экрана
Когда мы думаем о доступности кода, первое, что приходит на ум — это оптимизация под скринридеры. Скринридер — это вспомогательное программное обеспечение, которое озвучивает текст на экране компьютера (в данном случае — вашего письма). Чаще всего его используют люди с нарушениями зрения, но любой, кто взаимодействовал с Amazon Alexa, Apple Siri или Google Assistant, уже пользовался технологией чтения с экрана. По оценкам ВОЗ, в мире около 2,2 миллиарда человек имеют нарушения зрения.
Что происходит, если ваш код недоступен? Возьмем изображения в качестве примера. Без замещающего текста (ALT-текста) скринридеры не могут корректно описать изображение голосом.
Скринридеры в итоге просто зачитывают кучу неразборчивых символов из кода. Это означает, что подписчики, использующие скринридеры, вынуждены пробираться через хаос из букв и цифр, пытаясь услышать ваше сообщение. Это совсем не удобно, а ведь письмо еще даже не началось! Каковы шансы, что после такого опыта они откроют следующее письмо? (Подсказка: нулевые.)
## Чек-лист доступного кода письма
Иногда мы забываем прописать ALT-теги для изображений, используем нечитаемые цветовые сочетания или не оптимизируем письма под скринридеры. Это случается даже с лучшими из нас.
Вот чек-лист, который поможет сделать ваш код читабельным для всех подписчиков.
### 1. Добавьте языковой код в тег
Не все подписчики читают письма на ноутбуках или телефонах — некоторые используют скринридеры. Поскольку контент письма будет озвучиваться, он должен быть на правильном языке для корректного произношения. Чтобы это обеспечить, нужно указать язык письма в коде. Если он не указан, скринридер может прочитать французский текст с американским акцентом. Используйте атрибут lang=»xx», заменив «xx» на нужный код языка.
### 2. Всегда используйте ALT-теги для изображений
Важно помнить, что изображения в письмах могут быть не всегда видны (отключены пользователем, плохая связь). Если в изображении содержится важная информация, без ALT-текста она будет потеряна. Если изображение чисто декоративное, используйте пустой тег alt=»».
### 3. Включите атрибут role=»presentation» для всех элементов
