Руководство по доступному дизайну в email-маркетинге

**Основные выводы**:

— Цель доступного дизайна — сделать ваш контент удобным для каждого.

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

— Лучше делать небольшие шаги к доступности, чем не делать ничего.

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

Хотя доступность в дизайне всегда была хорошей практикой, с июня 2025 года она станет обязательной по закону согласно Европейскому акту о доступности (EAA). Когда мы опросили email-сообщество о готовности к этим изменениям, большинство респондентов не знали, о чем идет речь. Но мы можем это исправить.

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

### Содержание

— Что такое доступный дизайн?

— Принципы доступного дизайна для email-дизайнеров

— Распространенные ошибки дизайнеров в вопросах доступности

— Примеры доступных писем для дизайнеров

— Инструментарий дизайнера для обеспечения доступности писем

**Что такое доступный дизайн?**

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

— Постоянные состояния, такие как слепота.

— Временные травмы, например, сотрясение мозга или сломанное запястье.

— Ситуационные трудности, например, управление телефоном одной рукой, когда другая занята.

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

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

В дискуссии на Litmus Live 2024 Сара Галлардо, ведущий email-разработчик и специалист по доступности в Oracle Digital Experience Agency, отметила: «Недостаточно просто придумать хороший дизайн — многие дизайнеры могут это сделать. Email — это прежде всего платформа для коммуникации, поэтому очень важно, когда вы не можете полноценно общаться с 27% своих получателей».

Хотя фраза «доступный дизайн» встречается чаще всего, стоит знать и другие термины.

### 1. Доступный дизайн (Accessible design)

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

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

### 2. Инклюзивный дизайн (Inclusive design)

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

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

### 3. Универсальный дизайн (Universal design)

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

## Принципы доступного дизайна для email-дизайнеров

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

Перейти к советам по:

— Живому тексту

— Иерархии текста

— Выравниванию по левому краю

— Размеру шрифта

— Межстрочному интервалу

— Цветовому контрасту

— Фоновым изображениям

— Дизайну кнопок

— Ссылкам

— Макету

### Используйте реальный текст вместо писем из одних картинок

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

Реальный текст в HTML — это победитель в доступном дизайне по нескольким причинам.

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

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

Живой текст также доступен для поиска: подписчики могут найти рассылку или промокод, который вы присылали на прошлой неделе. SEO для email — это реальность!

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

### Создайте организованную и сканируемую иерархию

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

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

### Выравнивайте текст по левому краю

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

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

### Используйте минимальный размер шрифта 14px

Слишком мелкие шрифты делают дизайн трудночитаемым. К счастью, это легко исправить. Некоторые мобильные устройства автоматически увеличивают текст меньше 14px. Установите шрифт минимум на 14px (лучше больше), чтобы улучшить читаемость. Помните, что инструменты масштабирования могут изменить отображение шрифта, поэтому выбирайте надежные «безопасные» веб-шрифты (Arial, Helvetica).

### Оптимизируйте межстрочный интервал

Читаемость текста зависит и от интервалов. Слишком близкие строки сливаются, слишком далекие — делают чтение дробным. Консорциум Всемирной паутины (W3C) рекомендует межстрочный интервал от 1.5 до 2.

### Поддерживайте высокий контраст

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

### Баланс фоновых изображений и текста

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

### Сделайте кнопки понятными и кликабельными

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

### Упрощайте макет

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

## Распространенные ошибки дизайнеров

1. **Игнорирование принципов дизайна**: не заключайте текст в картинки.

2. **Изоляция**: работайте в связке с разработчиками и копирайтерами. Доступность — это командная работа.

3. **Предположения**: не думайте, что все видят и воспринимают письмо так же, как вы. Используйте инструменты проверки (Litmus, фильтры нарушений зрения).

## Инструментарий дизайнера

Litmus помогает создавать красивые и доступные письма:

— Библиотека шаблонов для повторного использования проверенных элементов.

— Email-билдер для легкой верстки.

— Инструменты проверки: тестирование на 40+ критериев доступности, фильтры цветовосприятия и предпросмотр того, как письмо звучит в скринридерах.