При создании email-рассылок много времени уделяют дизайну, конверсии и открываемости. Но у писем есть еще одна характеристика, о которой часто забывают. Это то, насколько сообщение доступно для чтения. Среди подписчиков почти любой базы есть люди с нарушениями зрения, дальтонизмом, когнитивными особенностями и иными ограничениями. Если проигнорировать работу с доступностью, часть аудитории просто не сможет нормально прочитать письмо, даже если оно идеально сверстано.
Кроме того, по данным последних исследований, рассылки, не рассчитанные на аудиторию с особенностями, могут иметь худшую доставляемость, чем инклюзивные.
В этой статье расскажу, что такое инклюзивность в email-маркетинге, зачем она нужна и как сделать email-рассылку доступной на практике.
Инклюзивность в email-рассылках — это подход к созданию и оформлению писем, который гарантирует их доступность, понятность и удобство для каждого получателя, независимо от его индивидуальных возможностей или условий чтения.
Инклюзивный подход в письмах должен учитывать следующие основные моменты:
То есть доступность затрагивает сразу несколько уровней письма — текст, структуру и дизайн. Речь идёт о том, чтобы сделать сообщение понятным для разных способов восприятия.
Может показаться, что доступность в письмах предполагает заботу о довольно узкой части аудитории, которой можно пожертвовать — например, ради красивого дизайна или скорости запуска рассылки. На самом деле причин задуматься об этом гораздо больше, и они касаются не только этики, но и вполне прагматичных вещей.
По данным ВОЗ, около одного из шести человек в мире имеет ту или иную форму инвалидности. Например, нарушениями зрения страдают не менее 2,2 млрд человек. Около 17-23% всего населения Земли имеют симптомы дислексии и связанных с ней трудностей. К этому стоит добавить пожилых людей, у которых часто ухудшается зрение и снижается скорость обработки информации.
То есть люди с ограниченными возможностями могут составлять значительную часть аудитории почти любой рассылки. Игнорировать доступность — значит терять часть подписчиков и потенциальных клиентов еще до того, как они успеют прочитать предложение.
Основным эталоном в вопросах цифровой доступности веб-ресурсов служат рекомендации WCAG (Web Content Accessibility Guidelines). Эти нормы не созданы специально для email, но принципы применимы и к письмам, которые технически представляют собой HTML-документы.
В основе WCAG лежат четыре принципа, известные как POUR:
Рекомендации WCAG разделены на три уровня соответствия: A (минимальный), AA (средний) и AAA (максимальный). При создании писем и большинства веб-страниц золотым стандартом считается уровень AA — он обеспечивает отличную доступность для большинства пользователей и при этом не накладывает жёстких ограничений на дизайн.
Ориентация на международные стандарты важна не просто сама по себе. Как минимуми, она делает рассылки соответствующими тем ожиданиям доступности, которые уже сформировались у пользователей веб-контента.
Во многих странах доступность цифровых продуктов закреплена законодательно. В США это закон о людях с инвалидностью ADA и стандарт Section 508 для государственных организаций. В Великобритании действует Equality Act. В Евросоюзе — European Accessibility Act. Несоблюдение этих норм грозит реальными юридическими последствиями, особенно для организаций, работающих в здравоохранении, финансах или госсекторе.
В России нет отдельного закона о доступности веб-продуктов. Отчасти госструктуры руководствуются ФЗ №181 «О социальной защите инвалидов в Российской Федерации», который гарантирует инвалидам право на доступ к информации. Также есть национальный стандарт ГОСТ Р 52872, основанный на WCAG, но он носит рекомендательный характер. То есть следование принципам доступности остаётся добровольным шагом. Но это не делает его менее важным.
Отдельно стоит отметить, что поддержка инклюзивности положительно отражается на репутации. Бренды, которые заботятся о доступности, воспринимаются как более клиентоориентированные. И наоборот — жалобы на нечитаемые письма, особенно публичные, бьют по репутации сильнее, чем кажется на первый взгляд.
Инклюзивное письмо не обязательно выглядит скучно или упрощенно. Суть в том, чтобы улучшить его восприятие, сделать более удобным для прочтения. Для этого важно предусмотреть наиболее вероятные сценарии взаимодействия и в соответствии с этим проработать основные элементы письма.
Не стоит использовать цвет как единственный способ передать важную информацию. Например, если всё самое ключевое выделено только красным цветом текста, то человек с дальтонизмом может ее не заметить — особенно если рядом есть зелёный, поскольку красно-зелёные сочетания сложнее всего различить при самых распространённых типах дальтонизма.
Для проверки восприятия дальтониками пригодятся симуляторы цветовых нарушений. Например, эмуляция в DevTools Chrome или сервисе Coblis. В любом случае желательно дублировать смысл иконкой, подписью или текстом.
Отдельное внимание нужно уделить контрасту между текстом и фоном. Слишком светлый текст на светлом фоне тяжело читать людям с любыми нарушениями зрения, а не только слабовидящим.
Стандарт WCAG уровня AA требует контраста не менее 4,5 к 1 для обычного текста и не менее 3 к 1 для крупного текста (от 18pt или от 14pt при жирном начертании) и графических элементов — иконок, границ полей ввода, кнопок. Для проверки соотношения контраста удобно использовать бесплатные онлайн-инструменты вроде WebAIM Contrast Checker.
Отдельно стоит проверять, насколько читаемо письмо в тёмной теме. Многие почтовые клиенты автоматически инвертируют цвета письма под настройки устройства, и то, что хорошо контрастировало в светлой версии, в тёмной может стать нечитаемым или, наоборот, слишком резким.
Текст мельче 14 пикселей на десктопе читать тяжело, особенно людям старшего возраста или слабовидящим. На мобильных устройствах минимальный комфортный размер обычно поднимают до 16 пикселей — это делают через стили, которые применяют отдельно для маленьких экранов.
Стоит выбирать шрифт с равномерным начертанием, без слишком узких или декоративных букв. Например, безопасные для email системные шрифты вроде Arial, Helvetica, Verdana или Georgia.
При использовании кастомного шрифта важно указать несколько запасных шрифтов через запятую. Если основной вариант не поддерживается почтовым клиентом, то применится следующий из списка.
Слишком тонкие (light) начертания тоже стоит использовать с осторожностью. Они хуже читаются, особенно на маленьких экранах и при плохом освещении.
Не стоит использовать текст, встроенный в изображение. Например, спецпредложение или условия акции, вписанные прямо в баннер. Программа чтения с экрана не может прочитать такой текст, особенно если alt-описание не заполнено или заполнено формально.
Кроме того, такой текст не масштабируется при увеличении письма и пропадает совсем, если изображения заблокированы в почтовом клиенте.
Лучше избегать длинных фрагментов текста, написанных заглавными буквами. Капслок замедляет чтение и особенно затрудняет его для людей с дислексией, поскольку все буквы становятся одинаковой высоты и текст теряет узнаваемые силуэты слов.
Также стоит следить за длиной строки. Комфортно читается строка примерно на 50–75 символов. Слишком длинные строки утомляют глаза, которым приходится совершать более длинный путь при переходе на следующую строку.
Плотно расположенные строки текста мешают читать людям с дислексией и с некоторыми зрительными нарушениями. Ориентир здесь задаёт критерий WCAG 1.4.12 (Text Spacing):
Также важно оставлять достаточно пространства вокруг абзацев и не прижимать текст к краям письма, добавляя внутренние отступы.
Это не просто эстетическая рекомендация. Пользователи с дислексией и слабовидящие часто самостоятельно накладывают поверх контента кастомные стили — через расширения браузера или настройки операционной системы, которые увеличивают межстрочные и межбуквенные интервалы. Если вёрстка письма «ломается» при таких изменениях (текст наезжает, обрезается или перекрывается), письмо становится нечитаемым именно для той аудитории, ради которой эти настройки и существуют.
Текст, выровненный по обоим краям, из-за неравномерных пробелов между словами читать сложнее, чем текст с выравниванием по левому краю. В частности, выравнивание по ширине растягивает пробелы между словами неравномерно, из-за чего в тексте образуются визуальные «реки» пустоты. В итоге глазу сложнее находить следующее слово при чтении, особенно это критично для людей с дислексией.
Центрирование текста по той же причине плохо работает для длинных абзацев. Глазу сложно найти начало следующей строки, когда левый край текста «плавает». Центрирование допустимо для коротких заголовков, цитат или кнопок, но не для основного текста письма.
При создании структуры письма важно учитывать не только то, как оно выглядит визуально, но и то, как оно устроено технически. Для программы чтения с экрана техническую структуру обеспечивают семантические теги заголовков — <h1>, <h2> и так далее. Именно они позволяют пользователю быстро перемещаться между разделами письма, не путаться в содержимом и не прослушивать весь текст подряд в поисках нужной части.
При этом важно соблюдать два правила: в письме должен быть только один <h1>, и нельзя перепрыгивать через уровни заголовков — например, ставить <h4> сразу после <h2>. В противном случае программа чтения с экрана теряет логику структуры, и пользователю становится сложнее ориентироваться в письме.
Списки — нумерованные и маркированные — стоит оформлять тегами <ul>/<ol>/<li>, а не имитировать дефисами или звёздочками в обычном тексте. Иначе программа чтения с экрана не объявит их как список и не подскажет пользователю, сколько пунктов и на каком он находится сейчас.
Для визуальной навигации важно соблюдать ту же иерархию за счёт оформления. То есть главный заголовок делаем крупнее, подзаголовки — меньше, но визуально отличимыми от основного текста и друг от друга.
Простой язык помогает всем читателям, а не только людям с когнитивными особенностями или дислексией.
Предложения стоит делать короче, ориентируясь примерно на 20 слов и меньше. Лучше использовать активный залог вместо пассивного, что делает структуру предложения проще. Желательно избегать жаргона, канцелярита и узкоспециализированных терминов без объяснения. Аббревиатуры нужно расшифровывать при первом употреблении.
Числа лучше писать цифрами (15, а не «пятнадцать») — так их быстрее считывают и скринридеры, и люди с когнитивными особенностями. Сложных метафор и идиом стоит избегать, поскольку они плохо считываются нейроотличными читателями и читателями, для которых язык письма не родной.
Полезно проверять текст тестами читаемости. Например, индексом Флеша-Кинкейда, который встроен в Microsoft Word. Ориентир для рассылок — уровень «легко читается», что примерно соответствует сложности текстов уровня 6–8 класса школы.
Упрощение текста не означает упрощение смысла. Речь о том, чтобы читателю не приходилось прикладывать лишние усилия ради понимания формы, а не содержания.
Зрячий пользователь может быстро пробежаться взглядом по письму и пропустить то, что ему не важно. У пользователя скринридера так не получится. Программа озвучивает письмо подряд, от начала до конца, и пропустить неважный блок «глазами» она не может.
Поэтому «декоративным изображениям» не нужен alt-текст с описанием. Alt-атрибут у них должен быть пустым, чтобы скринридер их просто пропускал, а не зачитывал лишнее описание там, где в этом нет необходимости. А лучше картинки, не несущие смысловой нагрузки, и вовсе не использовать.
Вся ключевая информация — цена, дата акции, условия предложения — должна быть представлена обычным текстом, а не спрятана в картинку. Если такие данные есть только на изображении, а оно не загрузится — а это частая ситуация в почтовых клиентах по умолчанию — пользователь эту информацию вообще не получит.
То же правило касается кнопок с призывом к действию (CTA). Если кнопка сделана как картинка, то рядом с ней — или вместо неё, если изображения отключены, — должна быть обычная текстовая HTML-ссылка с тем же действием.
Красиво и стабильно: гайд по дизайну кнопок в письмах
У каждого изображения в письме, кроме декоративных, должен быть атрибут alt. При этом важно определить тип картинки. Функциональное изображение, вроде кнопки, требует alt-текста с описанием действия, которое выполняет элемент. Иллюстративной картинке нужно краткое описание того, что на ней изображено.
Ориентир по длине alt — укладываться примерно в 125 символов, чтобы скринридеры не обрезали текст на середине. Плохой alt-текст выглядит как «изображение1.jpg» или «фото товара» — он не даёт никакой полезной информации.
Хороший alt-текст описывает суть: «синие кроссовки на шнуровке, вид сбоку». При этом не стоит начинать alt-текст со слов «изображение» или «картинка», поскольку скринридер и так объявляет тип элемента отдельно.
Полезно открыть письмо с отключенными картинками и посмотреть, понятно ли оно в таком виде. Это тот же опыт, который получает пользователь со скринридером или с настройками блокировки изображений в почтовом клиенте.
Формулировки вроде «нажмите здесь» или «подробнее» неинформативны сами по себе. А для пользователей со скринридерами это затрудняет понимание ссылок без чтения окружающего текста. Лучше использовать описательные формулировки. Например «посмотреть новую коллекцию обуви» вместо «кликните тут».
Кнопки и интерактивные элементы должны быть достаточно крупными для нажатия пальцем на мобильном экране. Apple рекомендует минимум 44×44 px для зоны нажатия, Google Material Design — 48×48 px. Кроме размера, важно расстояние между кликабельными элементами. Если ссылки или кнопки расположены слишком близко друг к другу, то люди с ограниченной моторикой чаще промахиваются мимо нужного элемента.
Ссылки в тексте должны отличаться от обычного текста не только цветом, но и, например, подчёркиванием. Если полагаться только на цвет, люди с дальтонизмом могут не заметить ссылку среди обычного текста.
Мерцающий или быстро мигающий контент может спровоцировать приступ у людей с фотосенситивной эпилепсией. Опасной считается частота мерцания от 2 до 55 герц. Анимацию в этом диапазоне нельзя использовать ни при каких условиях.
При наличии анимированных GIF необходимо ограничивать количество циклов воспроизведения и добавлять alt-текст с описанием содержания.
Если в письме есть видео, нужно отключить автовоспроизведение со звуком. Это не только вопрос доступности, но и источник общего раздражения для любой аудитории.
Дополнительно можно использовать медиазапрос prefers-reduced-motion. Эта настройка позволяет показывать статичную версию контента, если в системе пользователя включена настройка уменьшения движения.
Некоторые улучшения доступности реализуют через код письма — с помощью тегов и атрибутов HTML, а также медиазапросов.
Таблицы, которые используют только для вёрстки, а не для представления данных, стоит помечать атрибутом role="presentation". Это подсказывает программе чтения с экрана, что таблицу не нужно озвучивать ячейка за ячейкой.
Для таблиц с реальными данными полезно использовать связующие атрибуты scope="col" и scope="row". В частности, scope="col" связывает ячейки с заголовком по вертикали. А scope="row" связывает ячейки с заголовком по горизонтали. Благодаря этому скринридер, дойдя до конкретной ячейки, озвучивает не только само значение, но и название заголовка, к которому оно относится. Например, пользователь услышит не просто «150 рублей», а «Тариф Базовый, Цена: 150 рублей».
Также полезно указывать атрибут языка письма (lang). Например, lang="ru" для письма на русском. Он явно сообщает скринридеру, на каком языке написан текст, чтобы тот выбрал правильное произношение и интонацию. Без этого атрибута скринридер может определить язык неверно и прочитать текст с чужим акцентом или неправильными ударениями.
Для управления адаптацией под тёмную тему стоит использовать мета-теги color-scheme и supported-color-schemes. Они сообщают почтовому клиенту, какие цветовые схемы (светлую, тёмную или обе) поддерживает письмо, и позволяют самим задать альтернативные цвета для тёмного режима через код. Без этих тегов клиент может включить автоматическую инверсию цветов. При этом, например, светлый логотип на прозрачном фоне может превратиться в тёмный и стать нечитаемым на тёмном фоне.
Прежде чем отправлять письмо, стоит проверить его доступность. Это можно сделать несколькими способами, от простой визуальной проверки до специализированных программ.
Самый доступный способ, визуальная проверка, не требует специальных инструментов:
Ещё один простой тест: включите встроенный экранный диктор устройства и прослушайте письмо от начала до конца. Например, можно использовать VoiceOver на iPhone и Mac, TalkBack на Android или бесплатную программу NVDA на Windows.
Для более точной оценки пригодятся специализированные инструменты:
Целесообразно сделать проверку доступности регулярной частью процесса подготовки рассылки, а не разовым мероприятием. Можно завести короткий чек-лист с ключевыми пунктами: контраст, размер шрифта, alt-текст, формулировки ссылок, структура заголовков и тест с отключенными картинками. Такой чек-лист занимает немного времени, но заметно снижает риск того, что часть аудитории не сможет нормально прочитать письмо.
Стоит учесть, что инклюзивный подход в email-рассылках полезен не только для людей с ограничениями. Многие решения, сделанные ради доступности (крупный шрифт, простая структура, alt-текст), на практике улучшают восприятие письма вообще для всех читателей, независимо от особенностей. Это похоже на эффект бордюрных пандусов на тротуарах: их делают для людей на инвалидных колясках, но пользуются ими и люди с детскими колясками, чемоданами, велосипедами.
В целом, инклюзивность рассылки не требует полного пересмотра дизайна или отказа от творческих решений. В большинстве случаев достаточно нескольких точечных изменений в тексте, коде и оформлении, чтобы письмо стало доступно значительно большему числу людей.
При покупке или продлении тарифа «Стандарт» в Unisender добавляем крутые бонусы:
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
