Доступность email-писем: требования WCAG

Доступное письмо — это не отдельная «версия для людей с инвалидностью», а просто качественно свёрстанное письмо. Оно одинаково хорошо читается на смартфоне, в тёмной теме, со скринридером и при отключённых изображениях. Если этот пласт работы игнорировать, часть подписчиков физически не сможет понять ваше предложение — и вы потеряете их молча, без отписок и жалоб.

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

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

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

Кроме этики есть и прагматика. Во многих юрисдикциях доступность цифровых сервисов закреплена законодательно, а в ряде стран требования распространяются и на маркетинговые коммуникации. Плюс доступные письма реже попадают в спам: почтовые провайдеры лучше относятся к чистому семантическому HTML без «картинки вместо текста».

Доступность — это не дополнительный бюджет. Это набор правил вёрстки, которые дешевле соблюдать сразу, чем потом переделывать шаблоны под давлением жалоб или проверок.

Что такое WCAG и как он применяется к email

WCAG (Web Content Accessibility Guidelines) — рекомендации консорциума W3C, описывающие, как сделать веб-контент доступным. Они построены на четырёх принципах: воспринимаемость, управляемость, понятность и надёжность. Email — это урезанный HTML с ограниченной поддержкой CSS, поэтому правила применяются адаптированно, но базовые требования работают почти без изменений.

Уровни соответствия A, AA и AAA

Уровень A — минимальный набор, без которого контент местами просто недоступен. Уровень AA — стандарт де-факто для большинства проектов и нормативных требований. Уровень AAA — максимальный, часто нереализуемый в массовых рассылках из-за жёстких ограничений по контрасту и структуре.

Для типовой коммерческой рассылки разумный ориентир — уверенный AA. Он даёт ощутимый прирост читаемости и почти не конфликтует с дизайном.

Ключевые требования WCAG, применимые к письмам

Контрастность текста и элементов

Минимальный коэффициент контраста для основного текста — 4,5:1, для крупного текста (примерно от 24 px или от 18,7 px полужирным) — 3:1. Тот же порог 3:1 применяется к границам кнопок, иконкам и другим значимым графическим элементам.

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

Альтернативный текст для изображений

Информативные изображения — описывайте смысл, а не внешний вид: «график роста открываемости на 18% за квартал».
Декоративные картинки — оставляйте пустой атрибут alt, чтобы скринридер их пропустил.
Не начинайте описание со слов «картинка» или «изображение» — скринридер сообщает об этом сам.
Если важный текст запечён в баннер, продублируйте его в alt и по возможности вынесите в живой текст.

Семантическая структура

Используйте настоящие заголовки h2–h3, списки ul/ol и абзацы вместо набора div с крупным шрифтом. Скринридеры умеют перемещаться по заголовкам и спискам — так пользователь быстро схватывает структуру письма.

Обязательно указывайте язык документа через атрибут lang, иначе программа чтения с экрана может произносить русский текст с английскими правилами. Таблицы, применённые только для раскладки, помечайте role=presentation, чтобы они не воспринимались как таблицы данных.

Типографика и адаптивность

Держите базовый кегль в диапазоне 14–16 px, межстрочный интервал около 1,5, а длину строки — не более 60–70 символов. Текст должен выдерживать масштабирование до 200% без потери содержания и горизонтальной прокрутки.

Не фиксируйте ширину блока в пикселях и не запрещайте перенос строк. Односоставная резиновая вёрстка с медиазапросами решает большую часть проблем на мобильных устройствах.

Ссылки и кнопки

Формулировки должны быть понятны вне контекста: не «подробнее», а «посмотреть тарифы на рассылки».
Ссылки в тексте лучше подчёркивать — цвет как единственный признак ссылки работает плохо.
Кликабельная зона кнопки — не меньше 44×44 px, с отступами вокруг.
Не передавайте смысл только цветом: ошибка, выделенная красным без текста, нечитаема для части аудитории.

Анимация и мигающие элементы

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

Как сервис email рассылок помогает соблюдать доступность

Многое зависит от инструмента, в котором вы собираете письма. Хороший сервис email рассылок уже содержит встроенные подсказки: проверку контраста в редакторе, обязательное поле alt, готовые адаптивные шаблоны и автоматическую генерацию текстовой версии письма.

Обратите внимание на следующие возможности платформы:

валидатор контраста прямо в визуальном редакторе;
поддержка собственного HTML-кода без принудительной переверстки;
предпросмотр в тёмной теме и на разных размерах экрана;
автоматическое создание plain-text версии;
тестовые отправки в популярные почтовые клиенты.

Если сервис вынуждает верстать письмо целиком картинкой или не даёт задать alt, это повод присмотреться к альтернативам.

Чек-лист внедрения доступности

Проверьте контраст основного текста, кнопок и подписей.
Заполните alt для всех значимых изображений и очистите декоративные.
Сверстайте структуру через заголовки, абзацы и списки.
Укажите язык письма и корректный title документа.
Проверьте кегль, интерлиньяж и читаемость на мобильном.
Переформулируйте ссылки так, чтобы они были понятны по отдельности.
Увеличьте кликабельные зоны кнопок и добавьте отступы.
Откажитесь от смысла, закодированного только цветом.
Сгенерируйте и вычитайте текстовую версию письма.
Прогоните тестовую отправку в реальных клиентах и скринридере.

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

Включите скринридер (NVDA на Windows, VoiceOver на macOS и iOS) и пройдите письмо целиком.
Отключите загрузку изображений и проверьте, остаётся ли смысл.
Переключите интерфейс почты в тёмную тему и оцените контраст.
Увеличьте масштаб до 200% и посмотрите, не распадается ли вёрстка.
Пролистайте письмо одной рукой на смартфоне — попадаете ли вы по кнопкам.

Частые ошибки

Текст, зашитый в изображение, без дублирования в HTML.
Мелкий серый шрифт на светлом фоне.
Кнопка-картинка без alt и без текстовой ссылки-дублёра.
Единственный элемент навигации — «нажмите здесь».
Вёрстка на div вместо семантических тегов.

Вывод

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

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

Материал носит информационно-справочный характер и не является юридической консультацией. Конкретные требования к доступности цифрового контента зависят от законодательства вашей страны и отрасли — уточняйте их у профильного юриста.