Статья обновлена 08.04.2021

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

Но часто не принимаются во внимание особенности восприятия подписчиков, например различные нарушения зрения или навыков чтения (дислексия). А по данным Всемирной организации здравоохранения (ВОЗ), во всем мире таких людей насчитывается 2,2 миллиарда. То есть теоретически это около четверти ваших подписчиков. Не случайно компании постоянно недополучают около 8% дохода из-за отсутствия accessibility (доступности). Чтобы люди с ограниченными возможностями корректно воспринимали контент, которым вы делитесь в емейл-рассылках, и взаимодействовали с ним, позаботьтесь о доступности ваших писем.

Для этого не нужно прикладывать сверхусилий – достаточно помнить о нескольких простых правилах. Они не просто обеспечат доступность ваших рассылок для людей с ограниченными возможностями. Ваш контент станет более логичным и удобочитаемым для всех получателей.

Подробнее об Accessibility 

Мы обсудили тему доступности дизайна писем и сайтов на Marketing Talks со специалистами топовой в Украине юзабилити-студии “Турум-бурум”. Компания разрабатывает дизайн для крупных ecommerce- и финтех-проектов. И вот что нам удалось выяснить:

Accessibility – это свод правил и принципов в построении интерфейса и любой коммуникации, которая позволяет людям с ограниченными возможностями (нарушение зрения, слуха) свободно и доступно воспринимать информацию.
Денис Студенников, head of UX/UI department “Турум-бурум”

Факторы, чаще всего вызывающие трудности восприятия информации: 

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

Все эти факторы можно разделить на:

• врожденные (например, дальтонизм – наследственная особенность);
• приобретенные (с возрастом у людей ухудшается зрение); 
• ситуативные – (за рулем нельзя читать).

Как видите, доступность вашего контента необходима не только людям, которые имеют от рождения ограниченные возможности. Как же ее обеспечить?

Адаптация письма для чтения скринридерами

Программы для голосового чтения с экрана, такие как Alexa и Siri, получают все большее распространение. И ими активно пользуются не только люди с ограниченными возможностями. Например, голосовые помощники используются четвертью американцев на регулярной основе.

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

Делайте темы писем информативными

Программы для голосового чтения входящих писем прежде всего называют имя отправителя и тему письма. Исходя из этого, получатель решает, нужно ли ему услышать емейл полностью. Поэтому всегда используйте узнаваемое имя и в теме точно описывайте содержимое письма. Это улучшит доступность ваших рассылок для людей с ограниченными возможностями и в целом повысит вовлеченность подписчиков. Также вы можете смело использовать персонализацию по имени и другие переменные данные — скринридеры для слепых воспроизводят их.

Адаптируйте шаблоны

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

Чтобы этого не произошло, добавьте в строку код.

role=”presentation”.

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

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

Используйте заголовки

Оборачивайте заголовки письма в теги h1, h2 и т. д. и выделяйте абзацы тегами p.

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

В редакторе eSputnik вы легко настроите оформление всех заголовков в интерфейсе письма, код править не придется.

Установите HTML-атрибут языка

Укажите в начале HTML-кода письма атрибут языка,на котором оно написано: lang = “” (en, ru или другое сокращение согласно списку кодов языков HTML). Этот код укажет скринридерам, на каком языке воспроизводить контент письма.

Внешнее оформление

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

Используйте цветовой контраст

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

• используйте один цвет текста и один контрастный цвет фона, на котором текст размещен.
• избегайте сочетания красного и зеленого – большинство дальтоников неправильно воспринимают именно эти цвета.
• сверяйтесь с онлайн-анализаторами контрастности; минимальный коэффициент по стандартам уровня AA, изложенным в руководстве по обеспечению доступности веб-контента (WCAG) 2.0., должен быть 4,5:1.

С помощью специальных сервисов вы можете посмотреть, как видят цвета люди с разными типами дальтонизма.

Передавайте важную информацию в текстовом формате

Убедитесь, что весь важный контент в вашем сообщении представлен в виде текста – изображения должны быть только дополнением к нему.

Добавляйте к изображениям информативный альтернативный текст: большинство скринридеров читают его. В eSputnik вы легко сделаете это прямо в интерфейсе редактора.

Не используйте слишком длинные предложения и узкоспециальные термины. Язык письма должен быть простым и понятным. Хороший способ проверить емейл на соответствие этим требованиям – прочесть его вслух.

Оформляйте текст доступно

Несколько советов для облегчения восприятия текста:

1. Используйте размер шрифтов не менее 14 пикселей. Чем светлее шрифт, тем крупнее он должен быть.
2. Выбирайте шрифт Verdana – наиболее удобный для восприятия и облегчающий чтение.
3. Добавляйте в письмо больше воздуха, старайтесь делать абзацы короче, а межстрочный интервал – больше. Отступ между элементами должен быть не менее 20 пикселей. Все это упростит чтение людям со слабым зрением.
   
   
4. Не используйте Caps lock – если письмо будут озвучивать скринридеры, то такой текст будет прочитан, как аббревиатура, по буквам.
5. Следите за тем, чтобы call to action был дополнительно изложен коротким текстом, а не только кнопкой или картинкой, чтобы скринридер мог найти и озвучить его.
6. Не выравнивайте текст по центру. Такое оформление может выглядеть более привлекательным (особенно на мобильных), но людям с дислексией будет гораздо тяжелее его воспринимать. Левостороннее выравнивание – универсальный вариант.
7. Избегайте подчеркиваний, лучше выделить текст полужирным начертанием.
8. Пункты списков нужно заканчивать точкой или точкой с запятой для разделения.
9. Каждая новая мысль должна быть с новой строки – страдающим дислексией трудно найти окончание предложения.

Оформляйте ссылки информативно

Убедитесь, что текст ссылки сообщает вашим подписчикам, куда они попадут, если нажмут на нее. Например, вместо того, чтобы ставить ссылку на слово “здесь”, поставьте ее на текст “Нажмите сюда, чтобы увидеть все акционные предложения”.

Будьте осторожны с гифками

Гиф-изображения неплохо привлекают внимание, но могут вызвать сильный дискомфорт у получателей с дислексией и нарушениями зрения. В руководстве по обеспечению доступности веб-контента (WGAG) рекомендуется ограничить частоту смены изображений тремя в секунду. И стоит избегать чередования слишком ярких цветов.

Резюмируем

Чтобы ваши рассылки были доступны всем вашим подписчикам без исключения, следуйте следующим рекомендациям:

• Тема письма должна точно соответствовать его содержанию.
• Структура письма должна быть адаптивной, чтобы логический порядок контента не нарушался.
• Используйте семантическую разметку в коде письма.
• Перед отправкой рассылки послушайте, как Siri, Alexa и другие скринридеры читают ваше письмо. Проверьте, не нарушается ли логика изложения, понятен ли месседж.
• Создавайте понятный контент, не требующий дополнительной визуализации.
• Используйте контрастные цвета и крупный шрифт.