Полное руководство по доступным электронным письмам

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

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

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

Доступна ли ваша электронная почта? Проверки доступности в контрольном списке Litmus позволяют легко проверить вашу электронную почту на соответствие основным передовым практикам доступности, выявить области, требующие улучшения, и сделать вашу электронную почту более доступной для всех ваших подписчиков. Узнать больше →

Что такое доступность?

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

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

Как разработчики электронной почты мы тратим часы на то, чтобы письмо выглядело правильно в клиенте с долей рынка менее 1%, но очень немногие из нас потратят несколько минут на то, чтобы сделать электронную почту доступной.
- Марк Роббинс, Rebelmail

Специальные возможности в дизайне электронной почты

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

Разумное использование цвета

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

Цветовой контраст также может создавать проблемы для подписчиков с проблемами зрения. Используйте высокий цветовой контраст между различными элементами в электронном письме, особенно между цветом текста и фона. Один из способов сделать это - использовать средство проверки контрастности цвета WebAim, чтобы проверить коэффициент контрастности цветов в вашем электронном письме.

Доступны ли ваши электронные письма? Посмотрите, как ваши электронные письма выглядят для слабовидящих пользователей, с помощью фильтра цветовой слепоты в Litmus Email Previews. Попробовать Litmus бесплатно →

Не создавайте вредоносный контент

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

Баланс текста и изображений

В то время как зрячие пользователи могут визуально сканировать или пропускать нерелевантный контент, слепые пользователи должны прослушивать все содержимое электронного письма, по одному письму за раз. Настройте письменный контент в своем электронном письме так, чтобы он доставлял основное сообщение. Также подумайте, насколько ваш дизайн совместим с популярными программами чтения с экрана, такими как JAWS или Window-Eyes.

Повысьте удобочитаемость вашей электронной почты

Используйте шрифт большего размера

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

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

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Дайте вашей копии пространство, чтобы дышать

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

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Совет: увеличивая размер шрифта для мобильных устройств, не забудьте также увеличить высоту строки.

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

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

Избегайте использования обоснованной копии в своем электронном письме

«Выровненное по ширине» копирование означает, что интервал между буквами и словами настроен таким образом, чтобы текст совпадал с левым и правым полями. Непоследовательный межсловный интервал, который часто встречается в печати, может затруднить чтение текста по ширине. Текст с выравниванием по левому краю оказался более читаемым для всех.

Выберите правильный шрифт

Использование веб-шрифтов увеличило пул возможных гарнитур, которые можно использовать в электронной почте, но прежде чем вы решите использовать Lobster в качестве основного шрифта, подумайте о том, насколько он доступен. Выбирая шрифт для своего электронного письма, выберите тот, который имеет равномерный интервал и не слишком сжат. Это хорошая идея не только для доступности, но и для мобильных пользователей.

Используйте семантические элементы

Включение семантических элементов дает вашим подписчикам, использующим программы чтения с экрана, возможность «сканировать» электронное письмо по заголовку. Вы можете сделать это с помощью тегов <p> и <h>. Они поддерживаются каждым клиентом, так что это хорошее место, чтобы сделать вашу электронную почту более доступной.

Исторически стилизовать теги <p> и <h> было непросто, поэтому все еще довольно редко можно увидеть, что эти теги используются в электронной почте. Полями вокруг текста, заключенного в любой из этих тегов, было сложно управлять, но, используя подобный код, вы сможете управлять этим пробелом:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Совет: Использование правила mso-line-height: точно; в ваших тегах <h> будет сохраняться правило высоты строки, которое вы установили в почтовых клиентах Microsoft Outlook.

Посмотрите этот видеоролик из Litmus Live 2017, в котором разработчик электронной почты Пол Эйри объясняет, почему и как он использует семантические элементы HTML в своих электронных письмах, чтобы сделать их более доступными:

Твитнуть это видео →

Учитесь у экспертов Litmus Live Присоединяйтесь к нам на конференции Litmus Live, чтобы стать лучшим маркетологом по электронной почте, получая советы из реального мира, лучшие практики и практические выводы. Узнать больше →

Записать читаемую копию

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

Самый популярный тест, известный как тест Flesch-Kincaid Reading Ease, можно найти в Microsoft Word и рассчитывает, насколько легко ваш контент читать по шкале от 0 до 100. Это означает:

• Оценка от 90 до 100 будет легко понятна 11-летнему школьнику.
• Оценка 60-70 будет легко понятна учащимся от 13 до 15 лет.
• 30-50 баллов будут понятны студентам колледжа.
• Оценка от 0 до 30 будет лучше понятна выпускникам вузов.

Создание чего-то более «читабельного» не должно означать, что вы избегаете сложных или серьезных тем. Вместо того, чтобы приукрашивать ваше письмо, это относится к доступности текста. Ваша золотая середина находится где-то между 60 и 70, чтобы охватить широкую аудиторию. Конечно, если ваша аудитория высокообразованная, не бойтесь использовать более сложный язык.

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

Создать доступный контент

Сделать ссылки интерактивными / доступными для нажатия

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

Я люблю большие пуговицы и не умею лгать.
- Жюстин Джордан, Litmus

Хотя в рекомендациях Apple по интерфейсу пользователя iPhone для кнопок минимальная ширина и высота составляет 44 пикселя, это число зависит от производителя мобильного устройства. Альтернативное практическое правило - использовать минимальную ширину и высоту 72 пикселя, поскольку это средняя ширина пикселя большого пальца.

Удалить копию ссылки «Нажмите здесь»

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

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

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

Правильно используйте атрибут ALT

Атрибут ALT был лучшей практикой электронной почты с момента появления электронных писем HTML из-за того, что почтовые клиенты по умолчанию блокируют изображения. Текст, используемый в атрибуте ALT, прикрепленном к изображению, отображается, когда изображение не загружается. Это помогает подписчику «видеть» электронное письмо, если в его почтовом клиенте по умолчанию отключены изображения или если они используют программу чтения с экрана для чтения электронной почты.

Чтобы правильно использовать атрибут ALT, необходимо полностью понимать контекст изображения по отношению к окружающему его контенту. Во-первых, вам нужно решить, является ли изображение функциональным, иллюстративным или декоративным.

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

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

Для более глубокого понимания того, как контекст влияет на использование атрибута ALT для ваших изображений, посетите страницу WebAim, посвященную атрибуту ALT.

Используйте роль = "презентация" во всех презентационных таблицах.

В дизайне электронной почты таблицы используются для хранения содержимого, а также для структурирования дизайна электронной почты. Таблицы никогда не предназначались для дизайна; однако из-за ограничений в почтовых клиентах, таких как Outlook, дизайнеры электронной почты были вынуждены использовать элемент <table> в качестве элемента дизайна.

Чтобы помочь программам чтения с экрана понять разницу между элементами <table>, которые содержат контент, и элементами, предназначенными исключительно для дизайна, используйте add role = "presentation" в каждой таблице, содержащей контент, который подписчик должен прочитать. Вам нужно только добавить его к каждому элементу <table>, а не к каждому <td>. Это позволяет избежать принуждения программы чтения с экрана к чтению каждой ячейки ваших таблиц по очереди и помогает подписчику сразу перейти к важному контенту.

В дополнение к role = "presentation", aria-hidden = "true" - это еще один атрибут HTML, который можно добавить к элементам в вашем HTML, предназначенным для визуального контента и который должен быть скрыт от программ чтения с экрана:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role = "presentation" также можно использовать с изображениями. Разработчик электронной почты Реми Пармиентер обнаружил необычное поведение в Chrome для пользователей VoiceOver - программы чтения с экрана для MacOS. VoiceOver начал считывать имена файлов для изображений, даже если атрибут ALT присутствует, но пуст. Рекомендуется использовать атрибут HTML role = "presentation" на любом изображении с пустым атрибутом ALT, чтобы имя изображения не читалось.

Доступные электронные письма в действии

Мы можем реализовать определенный уровень доступности, если не будем ограничиваться сложностями. Сосредоточьтесь на том, что вы можете сделать, а не на том, чего не можете.
- Пол Эйри, По ту сторону конверта

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

Подписчики этого письма смогут увеличить размер текста в своем браузере до 200%, не нарушая дизайн письма. И в нем есть анимированный GIF, который останавливается после трех циклов (в течение пяти секунд) для тех, кто страдает фоточувствительными припадками.

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

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

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

ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР ЭЛЕКТРОННОЙ ПОЧТЫ, ВКЛЮЧАЯ И ВЫКЛЮЧАЯ ИЗОБРАЖЕНИЯ

Хотите увидеть, как ваши электронные письма выглядят в более чем 60 клиентах для ПК, мобильных устройств и веб-почты, включая просмотры без изображений? Попробуйте Litmus бесплатно!

Начать тестирование сейчас →

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