Руководство по обеспечению доступности электронной почты: стандарты и рекомендации

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

Вы можете подумать, что эти способности являются общими и даны всем по умолчанию? Что, если я скажу вам, что 4,5% получателей в вашем списке контактов страдают дальтонизмом, поэтому им трудно читать или понимать содержимое вашей электронной почты?

Хотя дальтонизм — не единственное широко распространенное заболевание. Просто факт: 285 миллионов человек во всем мире страдают серьезными нарушениями зрения, что затрудняет зрение даже в контактных линзах или очках.

А 5% населения Земли имеют нарушения слуха. Другими словами, более 360 миллионов.

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

А теперь сделайте себе чашку чая или кофе и давайте углубимся в детали.

Что означает доступность электронной почты?

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

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

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

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

Я поделюсь этими стандартами ниже, а также некоторыми практиками, которые будут полезны для создания доступных электронных писем.

Стандарты доступности

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

1. Дальтонизм

Существует список типов дальтонизма. Они здесь:

Протанопия означает несуществующее восприятие красного цвета. Читатели с протанопией, иначе называемые красными слепыми, склонны путать черный цвет со всеми оттенками красного. Они также не могут отличить темно-коричневый от темно-зеленого и не видят разницы между синим цветом и средним диапазоном красного. Взгляните на это письмо от Uber:

А вот как это видят реципиенты с протанопией:

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

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

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

Что нам делать?

• Выберите размер шрифта для копии письма не менее 14 пикселей. Тем не менее, я рекомендую 16px, чтобы предоставить получателям доступный дизайн электронной почты;
• Избегайте контрастных решений, основанных на цветах, которые дальтоники могут не различать. Например, не пишите текст зеленым или синим цветом на красном или сиреневом фоне. Посмотрите на сообщение ниже. Это нормально для людей с полным диапазоном восприятия цветов… но так ли хорошо в случае протанопии или монохроматического зрения? Я так не думаю…

(Оригинал сообщения)

(так это увидят клиенты с протанопией)

(как монохроматы видят это сообщение)

Как им понять, выиграла или проиграла матч их любимая команда?

• Забудьте о добавлении зеленых кнопок поверх красных картинок или наоборот. То же самое верно для всех «рискованных» цветовых сочетаний, упомянутых выше. Идея действительно плохая — люди с нарушениями цветовосприятия могут вообще не заметить кнопку;
• Всегда указывайте цвет товара в скобках — клиенты могут не различать, например, красный цвет, но знают, что красные рубашки или платья идеально подходят к их образу;
• Делайте ссылки в письмах жирными.

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

В этом письме пункты меню тоже выделены жирным шрифтом. Эта простая идея оптимизирует навигацию клиентов по рассылке — они легко найдут нужную категорию квартир.

Обратите внимание на ссылку «Подробнее» со стрелкой. В нем говорится, что вы можете увидеть более подробную информацию, щелкнув по нему;

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

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

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

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

2. Слепота и тяжелые нарушения зрения

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

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

На что здесь следует обратить особое внимание?

Тема письма

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

Таким образом, общепринятое правило простое, но эффективное: делайте свою строку темы краткой и описательной. Хорошая тема должна объяснять основную суть сообщения.

Языковые настройки

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

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

Логический порядок

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

Чтобы обеспечить доступность, укажите теги заголовков, такие как <h1> , <h2> , <p> и т. д., в HTML-коде. Эти теги имеют приоритет над обычным текстом, поэтому эти элементы озвучиваются первыми.

Кроме того, размер шрифта не имеет значения при указании тегов. В приведенном выше примере размер шрифта заголовка 2 составляет 24 пикселя, а шрифт обычной копии больше — 27 пикселов. Но программы чтения с экрана будут сначала озвучивать заголовок 2.

Альтернативный текст

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

Как настроить замещающий текст в соответствии со стандартами доступности? Вы правильно догадались, это довольно очевидно: сделайте этот текст кратким, описательным и информативным. Одно полезное примечание: избегайте слова «изображение» в этом тексте. Тег изображения уже указывает это, поэтому будет немного странно слышать дублированное «изображение изображение…»

Ссылки, элементы CTA, социальные иконки

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

Просто посмотрите на эти ссылки:

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

То же самое верно для кнопок CTA и значков социальных сетей. На самом деле, эти элементы тоже являются гиперссылками, просто обёрнутыми в эстетически привлекательную визуальную форму. Каждый опытный email-маркетолог уделяет им самое пристальное внимание, работает над дизайном и эффектами, подбирает идеальные цветовые решения для генерации кликов…

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

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

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

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

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

3. Дислексия

Люди, страдающие дислексией, склонны путать порядок букв в тексте, несмотря на нормальный уровень IQ.

Вот методы доступности для получателей с дислексией, основанные на публикации, опубликованной в Британская ассоциация дислексии.

• Избегайте подчеркивания ссылок. Как я уже упоминал выше, выделяйте ссылки жирным шрифтом, а не подчеркивайте их;
• Не начинайте новое предложение в конце строки. Новое предложение должно быть новой строкой соответственно;
• Нет CAPS LOCK, если нужно выделить/подчеркнуть какую-то мысль — вместо этого используйте более крупный шрифт;
• Забудьте о выравнивании по центру — только по левому краю экрана;
• Белый фон может отвлекать адресатов с дислексией, кремовые цвета более мягкие и не вызывают затруднений;
• Заканчивайте все предложения точкой (.), вы также должны использовать точку с запятой, когда в копии электронного письма есть маркеры.

4. Глухота и частичный слух

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

Только не полагайтесь на автоматические субтитры, предоставляемые Youtube и другими видеохостингами. Зачастую они, эээ… мягко говоря, далеки от идеала. А в некоторых случаях даже на грани шизофазии.

Основные советы по доступности электронной почты

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

Теперь давайте кратко повторим ключевые моменты этого поста. Как обеспечить доступность?

• Выбирайте разные цвета, чтобы создать контрастную схему, чтобы избежать путаницы;
• Пишите четкие и описательные строки темы;
• Никогда не забывайте об альтернативном тексте, добавляйте его ко всем изображениям;
• Если GIF-анимация имеет образовательную роль, предоставьте читателям подробное описание;
• Не используйте разные языки в одном письме, потому что программы чтения с экрана могут одновременно работать только с одним языком;
• Проверьте осмысленность ваших ссылок;
• Выровнять текст по левому краю;
• Создавайте свои информационные бюллетени и триггерные электронные письма с настоящей любовью. Заботьтесь обо всех своих подписчиках.

Я искренне желаю вам всего наилучшего. Распространяйте заботу и доброту вокруг!