Как создать переключатель доступности в email-рассылках

**Примечание редактора:** Это гостевой пост Пола Эйри, консультанта по дизайну и разработке email-рассылок и автора книги *«Типографика в email»*. Пол — ведущий сторонник доступности в email-маркетинге и создатель Accessibility Switcher™. Вы можете следить за Полом в Twitter и встретиться с ним на Litmus Live London, где он выступит с докладом о создании доступной системы дизайна для email.

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

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

Первым делом, когда я начал изучать доступность, я задал себе вопрос: «Что мешает нам, как email-маркетологам, дизайнерам и разработчикам, делать наши письма *доступными*?» Чтобы ответить на этот вопрос, я обратился к Руководству по доступности веб-контента (WCAG) — документу, определяющему стандарты доступности в интернете, чтобы понять, насколько близко или далеко мы находимся от соответствия этим стандартам в email-маркетинге.

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

Это привело меня к вопросу: «А что, если мы сможем реализовать *определённый тип* доступности в email?»

Я понял, что некоторые принципы и рекомендации из WCAG всё же можно применить в email. Эти выводы легли в основу моего доклада о типографике и доступности *«Определённый тип доступности»* на конференции The Email Design Conference в 2015 году, который позже стал основой системы дизайна Beyond the Envelope™, о которой я расскажу на Litmus Live London в августе.

## Почему доступность важна

Почему доступность так важна? Всё просто:

— Чем доступнее наши письма, тем больше людей мы можем охватить

— Чем больше людей мы охватываем, тем лучше мы позиционируем свои бренды и организации

Вопрос, который вы должны задать себе: «Хотите ли вы усложнить или упростить взаимодействие людей с вашим брендом или организацией?»

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

## Дизайн для разных потребностей

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

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

Но первый шаг — это только начало. Какой следующий шаг в развитии доступности email? Как создать письма, которые будут легко читаться и с которыми будет легко взаимодействовать для большего числа людей? Как убедиться, что мы используем доступный язык? Я считаю, что следующий шаг — это предоставить подписчикам возможность самостоятельно настраивать свой опыт, и, учитывая, что email — это прежде всего текстовый носитель, эта автономия должна касаться типографики, размера текста и контрастности.

Хотя в большинстве операционных систем есть встроенные решения для изменения размера текста и контрастности, большинство из них плохо работают в почтовых ящиках. Например, iOS от Apple позволяет пользователям увеличивать размер шрифта на уровне системы, но это приводит к таким результатам, как в этом письме от Spotify (которые, кстати, создают отличные письма!):

Операционные системы и браузеры, позволяющие изменять масштаб с помощью клавиш + и –, демонстрируют схожее нестабильное поведение. Так что, если встроенные настройки не обеспечивают нужный опыт нашим подписчикам, почему бы не внедрить их прямо в письма?

## Решение Accessibility Switcher™

Используя интерактивные техники для email, я создал Accessibility Switcher™, который впервые появился в четвёртом выпуске моей рассылки Type E. Он включал кнопку для увеличения размера текста, кнопку для его уменьшения и кнопку для инверсии цветов письма, чтобы повысить контрастность.

Я продолжал развивать Accessibility Switcher™, добавив серию кнопок для изменения цветов переднего плана и фона письма — создавая цифровую версию полупрозрачных цветных плёнок, которые используют люди с дислексией и болезнью Альцгеймера для облегчения чтения.

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

## Вопрос предпочтений

Я всегда считал, что Accessibility Switcher™ должен быть опцией, а не стандартной функцией. Поэтому, когда кто-то подписывается на Type E сегодня, ему нужно самостоятельно выбрать, чтобы переключатель доступности появлялся в письмах. Подписчики могут настроить его так, чтобы он позволял увеличивать и уменьшать размер текста, изменять цвета переднего плана и фона или делать и то, и другое.

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

## Как кодируется Accessibility Switcher™

Accessibility Switcher™ использует интерактивные техники для email, чтобы функционировать.

За кнопкой, которая увеличивает и уменьшает текст, скрывается чекбокс, который по умолчанию установлен в положение «checked», а за каждой кнопкой, изменяющей цвета переднего плана и фона, — серия радиокнопок.

Вот фрагмент HTML-кода для кнопок Accessibility Switcher™, размещённый между тегом и обёрткой письма:

«`