HTML Email и доступность

От автора: вы любите Email HTML, не так ли? Если вы разработчик, скорее всего, не любите… но подписчики 100% любят их. Они поглощают их, потребляют на всех устройствах, известных человеку, и приносят немалый доход для компаний, которые серьезно относятся к их маркетингу по электронной почте.

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

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

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

Таблицы доступности?

Одна из основных причин, по которым веб-разработчикам не нравится создавать электронные письма, заключается в том, что мы все еще придерживаемся таблиц для раскладки в электронной почте. Хотя есть разные способы обойти использование HTML-таблиц, большинство электронных писем по-прежнему полагаются на них, чтобы гарантировать, что электронные письма выглядят хорошо в Microsoft Outlook, который не поддерживает более традиционное позиционирование CSS, не говоря уже о более новых методах компоновки CSS, таких как Grid (хотя это возможно в электронной почте).

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

Однако, поскольку мы используем таблицы исключительно для структурных целей, нужно, чтобы скрин-ридеры игнорировали эти таблицы. Именно здесь роль ARIA может помочь нам. Применяя атрибут role = «presentation» к таблице, мы можем проинструктировать скрин ридер пропустить эти элементы и перейти прямо к контенту.

Благодаря этому простому дополнению наши письма гораздо более доступны. Следует отметить, что вложенные таблицы не наследуют это поведение, поэтому вам придется применять role = «presentation» индивидуально для каждой таблицы в вашей кампании. Хороший способ обеспечить доступность, не задумываясь об этом – это создать кусок кода или поместить его в email шаблон.

Из изображения в код

Общей практикой в маркетинге электронной почты является повсеместное использование изображений в электронной почте: графика, иллюстрации, текст, ссылки и кнопки. Хотя это может быть эффективным (нарезали, перемешали и отправили), это еще одна огромная проблема для подписчиков, использующих программы чтения с экрана. Типичная электронная почта на основе изображений содержит много информации, которая не может быть проанализирована машиной. Более того, многие почтовые клиенты также отключили изображения по умолчанию. Вы когда-нибудь видели что-то подобное?

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

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

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

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

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

Те же правила применяются в электронной почте, как и в Интернете:

Простой пример альтернативного текста в электронном письме письма со скидкой.

Помимо того, что наши электронные письма более доступны, мы можем на самом деле создать альтернативный текст, чтобы он лучше вписывался в остальную часть нашего дизайна электронной почты, когда изображения отключены. Использование таких вещей, как color, font-family, font-size, font-weight и line-height позволяет вам использовать альтернативный текст в основном так же, как и любой другой текст в письме. В сочетании с чем-то вроде фонового цвета на изображении эти стили позволяют получать высокооптимизированные и доступные электронные письма, когда изображения отключены.

Все дело в семантике

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

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

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

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

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

Проектирование для подписчиков

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

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

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

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

Я рекомендую вам использовать такие инструменты, как Chrome Lighthouse и Accessible-Colors.com, чтобы проверить доступность ваших проектов электронной почты в формате HTML. Это все HTML и CSS, поэтому те же инструменты, которые работают в Интернете, также работают над электронной почтой. Используй их!

У вас есть советы?

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

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

Автор: Jason Rodriguez

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: