Письмо, которое можно прочитать без картинок: мастерская доступной рассылки

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

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

Начните с текстового сценария

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

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

Заголовки должны описывать раздел

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

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

Ссылка обязана жить вне контекста

Три ссылки Подробнее звучат одинаково в списке ссылок. Назовите действие: Читать инструкцию по возврату, Скачать календарь на сентябрь, Посмотреть программу встречи. Не вставляйте длинный технический URL в середину абзаца.

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

Alt-текст не пересказывает картинку

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

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

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

Цвет и размер проверяются в неблагоприятных условиях

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

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

Простой язык экономит внимание

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

Инструкция должна называть действие и результат: нажмите Подтвердить адрес, затем откроется страница настроек. Не используйте указания кнопка справа или зеленая ссылка - расположение и цвет могут измениться.

Не прячьте выбор подписчика

В нижней части письма ясно укажите, почему человек его получил, как изменить частоту и как отказаться. Отписка не должна зависеть от зрения, терпения и памяти о пароле. Понятная ссылка снижает вероятность, что читатель нажмет Спам.

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

Пятнадцатиминутный тест редакции

1. Прочитать только текст без изображений.
2. Увеличить масштаб до 200 процентов.
3. Пройти ссылки клавишей Tab.
4. Прослушать письмо встроенным экранным диктором.
5. Проверить светлый и темный режим.
6. Открыть на узком экране и в двух разных почтовых клиентах.
7. Нажать отписку тестовым адресом.

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

Карточка качества перед отправкой

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

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