Доступные письма: как сделать email-рассылку инклюзивной

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

По данным ВОЗ, каждый шестой житель Земли — около 1,3 миллиарда человек — имеет ту или иную форму инвалидности. Ещё 2,2 миллиарда страдают нарушениями зрения. В России картина своя: по данным Росстата на конец 2024 года, в стране насчитывается 11,1 миллиона человек с инвалидностью — это 7,6% населения, примерно каждый тринадцатый. Из них почти 780 тысяч — дети.

Это не абстрактная статистика. Это реальная часть вашей адресной базы.

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

Интересно, что для сайтов в госсекторе по приказу Минцифры с 2022 года есть обязательный к исполнению ГОСТ Р 52872-2019. Но для коммуникаций, например, для писем, отправляемых теми же государственными службами, его нет. Хотя, казалось бы, в чем разница?

Email-доступность vs. веб-доступность: есть ли разница?

Общие принципы те же, но дьявол в деталях. Сайты строятся на современных стандартах HTML, а email до сих пор живёт в мире таблиц и инлайн-стилей. Это накладывает дополнительные ограничения.

Главное отличие: для email критически важна качественная plain-text версия письма. Для сайтов это необязательно, для рассылок — must have.

Кому это важно и почему вам должно быть не всё равно

Доступность нужна не только слепым и глухим. Вот кто выиграет от хорошего доступного письма:

• Люди с нарушениями зрения — незрячие пользователи используют скринридеры, люди с плохим зрением увеличивают текст или меняют контрастность.

• Люди с когнитивными особенностями — СДВГ, дислексия: им нужен чёткий визуальный порядок и простой язык.

• Пользователи с двигательными нарушениями — они могут работать только с клавиатурой, без мыши.

• Люди в ситуативном дискомфорте — читают с телефона на ярком солнце, держат ребёнка на руках, у них сломана рука.

• Пользователи старых устройств или медленного интернета — простое текстовое письмо грузится мгновенно.

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

Основные правила доступной email-рассылки

Всё ниже основано на стандарте WCAG 2.2 — это международный набор рекомендаций по доступности веб-контента. Рассмотрим применительно к письмам.

Воспринимаемость: видит ли пользователь контент?

• Alt-текст для картинок. Каждое смысловое изображение должно иметь описание. Не «картинка с медведем», а «Бурый медведь идёт по лесу». Для декоративных картинок — пустой атрибут alt=«", чтобы скринридер их пропустил.

• Логическая структура. Используйте заголовки (<h1>, <h2>) и списки — это помогает скринридеру строить навигацию по письму.

• Контраст текста. Соотношение контраста текста к фону должно быть минимум 4.5:1 для обычного текста и 3:1 для крупного. Тёмный текст на светлом фоне — беспроигрышный вариант.

• Не передавайте смысл только через цвет. Вместо «нажмите красную кнопку» — «нажмите кнопку „Продолжить“». Иначе человек с цветовой слепотой просто не поймёт, о чём вы.

• Шрифты. Arial, Helvetica, Calibri, Verdana — читабельная классика. Для аудитории с дислексией есть специальные: Lexend, OpenDyslexic.

• Никакого текста в картинках. Номер телефона или CTA в виде изображения — скринридер его проигнорирует, а картинка может просто не загрузиться.

• Масштабирование до 400%. Письмо должно оставаться читабельным при сильном увеличении. Одноколоночная адаптивная вёрстка справляется с этим лучше всего.

• Выравнивайте текст по левому краю, а не по ширине — это облегчает чтение при дислексии.

Управляемость: можно ли взаимодействовать с письмом?

• Тема и прехедер должны чётко отражать содержание письма.

• Текст ссылок должен быть осмысленным. Не «кликните здесь», а «Читать руководство по email-доступности». Скринридеры зачитывают ссылки списком — представьте, как звучит десять раз «кликните здесь» подряд.

• CTA-кнопки должны чётко говорить, что произойдёт: «Скачать отчёт», а не «Узнать больше». 

• Никакого мигающего контента — это может спровоцировать эпилептический приступ у светочувствительных людей. Правило простое: не больше трёх вспышек в секунду.

Понятность: доходит ли смысл?

• Пишите просто. Вместо «наша cutting-edge методология позволяет оптимизировать воркфлоу» — «наш инструмент помогает работать быстрее». Аудитория оценит. 

Кстати, с 1 марта с новым законом о защите русского языка (№ 168-ФЗ) это стало вдвойне актуально.

• Структурируйте контент. Короткие абзацы, списки, логичные лаконичные заголовки.

• Придерживайтесь единого стиля во всех письмах — предсказуемость помогает.

Надёжность: корректно ли это работает технически?

• Plain-text версия обязательна. Это запасной вариант для скринридеров и почтовых клиентов, блокирующих HTML. 

Хорошая новость: в DashaMail plain-text версия письма генерируется  автоматически.

• Атрибут role="presentation" в табличной вёрстке — сообщает скринридеру «это не таблица данных, просто вёрстка».

• Атрибут <html lang="ru"> — подсказка скринридеру, на каком языке читать.

• Dark mode. Используйте прозрачный логотип и контрастный текст, чтобы письмо не сломалось при инвертировании цветов.

Как проверить доступность письма

Встроенные скринридеры — лучший способ почувствовать опыт незрячего пользователя:

• VoiceOver (macOS / iOS);

• NVDA, JAWS, Microsoft Narrator (Windows);

• TalkBack (Android).

Автоматические чекеры: WAVE Web Accessibility Tool, Microsoft Accessibility Insights — ловят типичные проблемы в коде.

Контраст: WebAIM Color Contrast Checker, Color Oracle — проверка цветовых комбинаций и симуляция цветовой слепоты.

Читабельность: Hemingway App — показывает, насколько сложно читается текст.

Полное тестирование: инструмент «Провидица» в нашем сервисе позволяет проверить рендеринг письма в разных клиентах — Gmail, Outlook и т. д.

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

Чеклист перед отправкой

✅ Тема и прехедер понятны без открытия письма

✅ У всех смысловых картинок есть alt-текст

✅ Контраст текста — минимум 4.5:1

✅ Ссылки и кнопки описывают действие, а не «кликните здесь»

✅ В коде есть атрибуты lang="ru" и role="presentation" на layout-таблицах

✅ Есть plain-text версия письма

✅ Письмо проверено скринридером и клавиатурной навигацией

✅ Нет мигающих элементов

✅ Одноколоночная адаптивная вёрстка

✅ Проверена совместимость с dark mode

Доступность — это не про то, чтобы сделать «специальную версию для инвалидов». Это про то, чтобы письмо нормально работало для всех. Заодно вы получите более чистый код, лучшую читабельность и доверие подписчиков. Что тут может не понравиться?

С любовью, Даша и творческий коллектив Dashamail

Еще больше полезных и интересных статей читайте в блоге DashaMail