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

15% населения планеты живут с той или иной формой инвалидности. Среди них - ваши подписчики, клиенты, партнёры. Если ваше письмо нельзя прочитать с помощью screen reader или разобрать при слабом зрении, вы теряете этих людей. Молча.

Доступность email - не благотворительность. Это практика, которая улучшает письма для всех: тех, кто читает в тёмной теме, на медленном интернете, на маленьком экране или с выключенными картинками.

Зачем вообще думать о доступности в email

Веб-сайты давно живут по стандартам WCAG. Email отстаёт на несколько лет, но ситуация меняется. В ЕС уже действует European Accessibility Act, который распространяется на цифровые коммуникации. В США - ADA и Section 508. Россия пока не регулирует доступность email напрямую, но ГОСТ Р 52872-2019 задаёт требования к информационным системам.

Юридика в сторону. Есть три практических аргумента:

• Охват. По данным WHO, 2.2 миллиарда человек имеют нарушения зрения. Часть из них пользуется экранными дикторами, часть - просто увеличивает шрифт.
• Качество. Доступное письмо лучше структурировано, быстрее грузится, корректнее отображается в нестандартных почтовых клиентах.
• Доставляемость. Письмо с alt-текстами, нормальным соотношением текста и картинок, чистой разметкой - это ровно то, что любят спам-фильтры.

Alt-тексты для изображений

Самая частая ошибка в email-рассылках - картинки без alt-текста. Screen reader встречает такое изображение и говорит вслух: «Image». Или, что хуже, зачитывает имя файла: «banner_final_v3_updated.png». Для человека, который не видит экран, это шум.

Правила простые. Если изображение несёт смысл - опишите его. Баннер с текстом «Скидка 30% до пятницы» должен иметь alt: «Скидка 30% на все тарифы до пятницы». Если изображение декоративное - оставьте пустой alt: alt="". Пустой alt говорит screen reader: «Пропусти, тут ничего важного».

Отдельный случай - письма, которые целиком состоят из одной картинки. Помимо того что спам-фильтры их не любят, такие письма полностью невидимы для screen reader без alt-текста. Если ваш дизайнер прислал макет-картинку - перенесите текст в HTML. Это не компромисс; это необходимость.

Семантическая структура: заголовки, списки, таблицы

Screen reader позволяет перемещаться по документу: от заголовка к заголовку, по спискам, по ссылкам. Но только если разметка семантическая. Если весь текст лежит в <div> и <span>, навигация невозможна.

В email есть ограничения: не все почтовые клиенты поддерживают <article> или <nav>. Но базовые теги работают везде:

• <h1> – <h3> для заголовков (иерархия важна - не пропускайте уровни)
• <p> для параграфов, а не <div> с отступами
• <ul> и <ol> для перечислений
• <table role="presentation"> для таблиц раскладки (чтобы screen reader не пытался озвучивать данные таблицы)

Добавьте атрибут lang="ru" в корневой тег HTML письма. Без него screen reader может начать озвучивать русский текст с английским произношением. Это происходит чаще, чем кажется.

Контрастность: чтобы текст можно было прочитать

WCAG требует коэффициент контрастности минимум 4.5:1 для обычного текста и 3:1 для крупного (18px+ или 14px+ bold). Светло-серый текст на белом фоне - классика email-дизайна и классическое нарушение доступности.

Проверить контрастность можно за секунды: WebAIM Contrast Checker, плагины для Figma, встроенные инструменты Chrome DevTools. Привычка проверять каждый цвет текста перед отправкой окупается с первого же письма.

Отдельная проблема - тёмная тема. Apple Mail, Gmail и Outlook автоматически инвертируют цвета или подставляют тёмный фон. Тёмный текст на прозрачном фоне может превратиться в тёмный текст на тёмном фоне. Решение: задавайте фоновый цвет явно, тестируйте в обоих режимах.

Размер шрифта и кнопок

Основной текст - минимум 16px. Не 12, не 14. При 14px человеку с нормальным зрением уже приходится напрягаться на мобильном экране. При нарушениях зрения - текст нечитаем.

Кнопки и ссылки - область нажатия минимум 44x44 пикселей. Это рекомендация Apple для Touch Target, и она работает для email. Маленькая ссылка «Подробнее» размером 10px - мишень, в которую трудно попасть даже без моторных нарушений.

Межстрочный интервал (line-height) - 1.5 от размера шрифта или больше. Плотный текст тяжело читать людям с дислексией и когнитивными нарушениями. Впрочем, плотный текст тяжело читать всем.

Ссылки: текст, а не «нажмите сюда»

Screen reader позволяет вывести список всех ссылок на странице. Если каждая ссылка называется «нажмите сюда» или «подробнее», список бесполезен. Человек не понимает, куда ведёт каждая из них.

Ссылки должны быть визуально отличимы от обычного текста не только цветом. Добавьте подчёркивание. Около 8% мужчин имеют ту или иную форму дальтонизма - для них синяя ссылка на чёрном тексте может быть неотличима без подчёркивания.

Таблицы: layout vs данные

Email до сих пор верстается на таблицах - это реальность, с которой приходится мириться. Проблема: screen reader пытается озвучить каждую ячейку как часть таблицы данных. Колонка 1, строка 3, содержимое... На письме из 15 таблиц это превращается в пытку.

Решение: role="presentation" на каждой таблице, которая используется для раскладки. Это говорит screen reader: «Это не таблица данных, просто пройди насквозь». Если у вас есть настоящая таблица с данными (например, чек заказа) - используйте <th> для заголовков столбцов и атрибут scope.

Интерактивные элементы и анимация

AMP-письма, CSS-анимации, карусели - всё это набирает популярность. Но если интерактивный элемент - единственный способ получить информацию, люди с отключённым JavaScript или неподдерживающим AMP клиентом ничего не увидят.

Правило: любой контент должен быть доступен в статичном HTML-варианте. Карусель картинок? Пусть будет, но добавьте все варианты ниже в виде обычных изображений с alt-текстами. Счётчик обратного отсчёта? Продублируйте дату текстом.

Мигающий или мерцающий контент (чаще 3 раз в секунду) противопоказан людям с фотосенситивной эпилепсией. В email такое встречается редко, но GIF-баннеры с быстрой сменой кадров - в зоне риска.

Чек-лист: 10 пунктов перед отправкой

Ни один из этих пунктов не требует переделки шаблона с нуля. Большинство - это правки в несколько строк кода. Но вместе они превращают ваше письмо из непроходимого для части аудитории в читаемое для всех.

Тестирование доступности email

Ручной тест: откройте письмо, закройте глаза, включите VoiceOver (Mac) или NVDA (Windows). Послушайте, как screen reader озвучивает ваше письмо. Этот опыт запоминается лучше любого чек-листа.

Автоматические инструменты: Litmus и Email on Acid проверяют доступность в составе общего тестирования. Accessibility Insights от Microsoft работает для веб-версий писем. axe DevTools - для быстрой проверки контрастности и разметки.

Не забывайте про plain-text версию. Некоторые подписчики читают почту именно в этом формате - по выбору или из-за настроек screen reader. Plain-text версия должна быть полноценной: весь контент, все ссылки, понятная структура.

Доступность - это не отдельная задача

Это часть качества. Как валидация email-адресов, как проверка отображения в разных клиентах, как тестирование темы письма. Доступность встраивается в процесс и перестаёт быть «дополнительной работой».

Начните с alt-текстов и контрастности - это два изменения, которые дают максимальный эффект при минимальных усилиях. Потом добавьте семантику и протестируйте со screen reader. За неделю ваши письма станут лучше для миллионов людей, которых раньше вы просто не замечали.