menu

Really Good Emails: как адаптировать письмо для людей с ограниченными возможностями

7 советов по вёрстке писем

Email-маркетолог Стив Сайо рассказал в блоге Really Good Emails, как адаптировать email для людей с ограниченными возможностями. Речь идёт об особенностях дизайна и вёрстки для подписчиков с нарушениями зрения, навыков чтения и письма. Делимся основными выводами из статьи.

6 миллионов людей в Великобритании страдают от проблем со зрением. В РФ таких людей больше — по данным Минздрава, в 2017 году их было 15,2 млн. Проблемы с речью, сложности в письме и чтении встречаются примерно у 5% людей во всём мире (300 млн).

Этим людям тяжело пользоваться компьютером: просматривать сайты, переписываться, читать почту.

Email-маркетологи, работая над email, могут помочь людям с ограниченными возможностями проще воспринимать письма. Перечислим основные 7 принципов, как это сделать. 

1. Добавьте атрибут «presentation»в тег <table> в письмах

Многие пользователи, которые не могут читать, настраивают автоматическое зачитывание контента. Чтобы голосовой помощник не читал HTML-код в таблице, добавьте атрибут «presentation», который позволит помощнику определить, где текст для чтения, а где элементы вёрстки. 

2. Прописывайте аlt-текст в картинках

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

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

Письмо PichShop с включенными картинками
Письмо PichShop с включенными картинками
Картинки отключили, но благодаря alt-текстам понятно, какое изображение должно быть вместо надписи
Картинки отключили, но благодаря alt-текстам понятно, какое изображение должно быть вместо надписи

3. Следите за размером шрифта и используйте значение rem вместо пикселей

У людей с ограниченными возможностями часто специфическим образом настроен браузер. 

Чтобы ваше письмо адаптивно подстроилось под специальные настройки, во время вёрстки используйте rem-значение вместо пикселей. 1 rem всегда будет зависеть от размера шрифта в элементе <html>. Обычно браузеры задают этот размер по-умолчанию, но если мы его впишем в <html> вручную, то 1 rem будет как раз равен этому значению.

По мнению UX-дизайнера Эрика Кеннеди, самый маленький допустимый шрифт на странице — 13-14 пикселей. Он рекомендует использовать его для описаний и примечаний. Для основного текста лучше брать шрифт в 16 пикселей и больше.

4. Сделайте визуальную структуру письма легкой для восприятия

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

Пользуйтесь семантической структурой, то есть заголовками  h1, h2, h3, где это уместно. Старайтесь, чтобы абзац не был длиннее 5 строк. 

5. Избегайте анимации в важных информационных блоках

Анимация хорошо привлекает внимание, но может перегружать информационно. Избегайте анимации в важных информационных блоках. Там, где без неё не обойтись, советуем придерживаться рекомендаций WCA3: максимум 3 мигания в секунду, а сама область мигания не должна превышать 22 квадратных пикселя. 

6. Следите, чтобы письмо было контрастным

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

7. Проставляйте тег языка (RU, EN), чтобы облегчить автоматический перевод

В <head> укажите, на каком языке это письмо. Тогда пользователь легко сможет машинным переводом перевести и прочитать письмо, даже если не знает язык.

Что это значит для меня

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

«Пиши, отправляй. Как писать тексты для email-рассылок»

Подпишитесь на рассылку и получите электронную книгу

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