Гайдлайны по доступности писем: стандарты и лучшие практики

Если ваше письмо не доступно, значит, оно сломано.

Марк Роббинс,

инженер-программист Parcel, администратор Email Markup Consortium.

Доступность писем продолжает оставаться жизненно важной темой. Хотя доступность стала привычной вот уже более десяти лет назад, но поразительный факт: в 99,97% писем по-прежнему присутствуют критические проблемы доступности.

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

Ключевые выводы

1. Несмотря на то, что HTML-письма уже более десятилетия считаются само собой разумеющейся необходимостью, мы до сих пор видим обескураживающий факт: 99,97% рассылок в формате HTML по-прежнему имеют существенные проблемы с доступностью, что указывает на огромные пробелы в практике email-дизайна.
2. Усовершенствование писем в плане доступности — это не просто приятное дополнение, а необходимость, поскольку примерно для половины населения Земли более доступный дизайн рассылок потенциально может принести пользу, решая различные проблемы со здоровьем: нарушения зрения и слуха, двигательные и когнитивные расстройства.
3. Эффективная доступность выходит за рамки простых технических поправок и требует комплексной пятишаговой стратегии: дизайн (обеспечение визуальной доступности), текст письма, работа с alt-текстом, технологиями и стратегическое размещение ссылок. Только такой целостный подход обеспечивает полную доступность во всех аспектах email-общения.

Статистика по доступности: количество людей во всем мире, которым будет полезна доступность писем

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

• 2,5 миллиарда людей имеют нарушения зрения, в том числе 2,2 миллиарда с проблемами остроты зрения и 300 миллионов с дальтонизмом;
• 430 миллионов утратили слух (полная глухота), а 1,5 миллиарда имеют нарушения остроты слуха;
• 968 миллионов людей имеют двигательные расстройства;
• 1,6 миллиарда имеют когнитивные нарушения и расстройства восприятия, в том числе 960 миллионов людей страдают дислексией, а 400 миллионов — фотосенситивной эпилепсией.

Эта диаграмма показывает, что доступные письма были бы полезны примерно для половины населения планеты, однако 99,97% HTML-писем имеют существенные проблемы с доступностью.

Вам также может понравиться

Почему цифровая доступность важна и как начать работу над ее обеспечением, часть 1

Список лучших практик по обеспечению доступности писем

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

1. Делайте alt-текст для изображений и GIF-файлов содержательным.
2. Если GIF-анимация или изображение служит образовательным целям, обязательно добавьте детальное письменное описание.
3. Применяйте заголовки и подзаголовки (вместо простого использования более крупных шрифтов), чтобы осмысленно систематизировать контент и сделать его понятным для программ чтения экрана.
4. Используйте только программно отформатированные заголовки, маркированные и нумерованные списки.
5. Сделайте текст ссылки содержательным.
6. Выбирайте доступные шрифты, такие как OpenDyslexic, Comic Sans, и шрифты без засечек, например: Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri и Open Sans.
7. Установите межстрочный интервал порядка 150%.
8. Указывайте в скобках названия цветов элементов.
9. Тестируйте текст и изображения на предмет цветовой контрастности.
10. Избегайте СПЛОШНОГО КАПСА для непрерывного текста; вместо этого используйте более крупные строчные буквы.
11. Добавляйте знаки препинания в конце маркеров и каждого предложения, в том числе в заголовках.
12. Используйте одноцветный, но не белый фон.
13. Выравнивайте текст по левому краю, без переносов строк и растягивания.
14. Избегайте чрезмерного выделения жирным шрифтом или курсивом — жирный шрифт лучше использовать для расставления акцентов.
15. Подчеркивание разрешено только для ссылок.
16. Размещайте только одну GIF-анимацию на одном экране.
17. Используйте GIF-файлы с частотой менее трех кадров в секунду.
18. Настройте язык письма, роли представления и атрибут dir для программ чтения экрана.

Вот собственно основные стандарты доступности писем. Далее мы расскажем, как мы разработали эти специальные правила.

Этапы создания доступных писем

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

Вот как это делается:

Этап 1. Написание доступного текста письма

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

Рекомендации по доступности текста:

• будьте лаконичны: пишите короткие тексты, чтобы получатель мог быстро уловить вашу мысль без необходимости читать многобуквенные лонгриды;
• установите межстрочный интервал порядка 150%;
• будьте проще: используйте простой язык, который легко поймет ученик 8-го класса. Избегайте сложного жаргона или академических терминов;
• используйте подзаголовки: разбивайте контент на разделы с четкими подзаголовками, чтобы письма было легче просматривать.
• оформляйте заголовки, а не просто используйте более крупные шрифты.

Этап 2. Оптимизация alt-текста

Поскольку люди с нарушениями зрения не видят ваши картинки, для эффективной коммуникации нужен понятный и описательный alt-текст.

Томас Логан,

Консультант по вопросам доступности, владелец Equal Entry.

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

Эксперт

Сара Галлардо

Ведущий email-разработчик Oracle | Специалист по доступности писем | CPACC | Доверенный тестировщик

Вначале давайте определим разницу между атрибутом alt и alt-текстом:

• атрибут alt — это HTML-атрибут, используемый внутри элемента изображения; 
• alt-текст — это контент, размещенный внутри атрибута alt.

Давайте посмотрим, что будет, если атрибут alt отсутствует:

• люди, использующие программы чтения экрана, услышат полный URL-адрес размещенного изображения или имя файла, если изображение не сопровождается ссылкой, или URL-адрес изображения, если оно имеет ссылку; 
• никто из получателей не будет иметь ни малейшего представления, о чем идет речь в изображении, если оно было заблокировано.

(Источник: Вебинар Сары Галлардо)

Вот лучшие практики, касающиеся alt-текста:

Эксперт

Сара Галлардо

Ведущий email-разработчик Oracle | Специалист по доступности писем | CPACC | Доверенный тестировщик

• учитывайте не только контент, но и контекст изображения;
• убедитесь, что alt-текст передает именно то, что изображено на картинке;
• помните о том, что программы чтения экрана обычно прекращают читать alt-текст после 100-120 символов;
• пропускайте фразы «это изображение о том-то», так как скринридер самостоятельно упоминает о наличии изображения;
• используйте заглавные буквы в предложениях и заголовках, избегайте СПЛОШНОГО КАПСА;
• стремитесь к описательному, но при этом лаконичному alt-тексту;
• обеспечьте хороший контраст alt-текста и фона для визуальной четкости.

Этап 3. Обеспечение доступности ссылок

Эксперт

Сара Галлардо

Ведущий email-разработчик Oracle | Специалист по доступности писем | CPACC | Доверенный тестировщик

Лучшие практики обеспечения доступности ссылок:

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

Этап 4. Оптимизация дизайна

По причине своей сложности этот этап будет поделен на несколько групп.

Группа 1. Гайдлайны по форматированию доступного текста

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

• избегайте СПЛОШНОГО КАПСА, так как люди с дислексией неправильно интерпретируют такой текст, а программы чтения экрана могут расценить его как аббревиатуры;
• добавляйте знаки препинания в конце маркеров и заголовков;
• сведите к минимуму использование курсива и полужирного шрифта для выделения, а полужирного курсива избегайте полностью;
• подчеркивайте текст только в том случае, если это гиперссылка;
• для удобства чтения выбирайте для основного текста размер 16 пикселей ;
• используйте доступные шрифты, такие как OpenDyslexic, Comic Sans, и шрифты без засечек — Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri и Open Sans;
• выравнивайте текст по центру без растягивания и переноса строк.

Хотя Success Criterion 1.4.8 (соответствие AAA) и допускает это, в новейших практиках по ряду причин рекомендуется избегать растягивания текста. Выравнивайте текст только по одной стороне.

Дэвид Геворкян,

CEO / основатель Be Accessible.

Группа 2. Работа с цветами

Какие расстройства затрагивает: цветовая слепота, слабое зрение и дислексия.

Эксперт

Сара Галлардо

Ведущий email-разработчик Oracle | Специалист по доступности писем | CPACC | Доверенный тестировщик

• обеспечьте достаточную цветовую контрастность для текста и изображений;
• используйте одноцветный фон — для текстов размером менее 18 пикселей жирным шрифтом и 24 обычным шрифтом он должен составлять 4:5:1, а для текстов более крупного размера — 3:1;
• выбирайте темно-серые шрифты на небелом фоне вместо глубокого черного на ярко-белом;
• избегайте использования одних только цветов для выделения важной информации в письмах;
• при использовании изображений для указания правильных или неправильных ответов (красным и зеленым соответственно) или выражения трендов в цифрах дополняйте их текстовыми описаниями или знаками «+» и «-» для большей ясности.

(Источник: письмо от HubSpot)

Группа 3. Работа с изображениями

Какие расстройства затрагивает: дальтонизм, слабое зрение, дислексия и фотосенситивная эпилепсия.

Работая с GIF-файлами и изображениями, не забывайте об этом:

• используйте GIF-анимации с частотой менее трех кадров в секунду;
• используйте по одному анимированному изображению (GIF) на экран;
• придерживайтесь цветового контраста, как было описано выше;
• добавляйте информативный alt-текст для изображений. Для GIF-файлов, которые содержат инструкции или важную информацию, подойдут дополнительные описания под анимацией.

Этап 5. Соблюдение требований доступности для кода письма

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

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

 

Назовем только самые важные моменты:

• установите атрибут lang как в элементе <html>, так и в прямых дочерних элементах <body>. Эта избыточность необходима, поскольку некоторые почтовые клиенты могут удалить ее из элемента <html>;
• упакуйте контент внутри <body> атрибутом dir для четкой направленности;
• назначьте role="presentation" или role="none" элементам <table> атрибута role.

Инструменты проверки соответствия писем всем инновационным практикам обеспечения доступности

Когда вы завершите разработку email-кампании, протестируйте ее при помощи инструментов проверки доступности и / или запустите программу чтения экрана.

Вам нужно стать своим собственным клиентом. Это означает, что нужно тестировать результат, причем тестировать его всегда.

Майк Пачиелло,

Главный специалист по вопросам доступности AudioEye | Основатель, вице-президент, директор, автор, ментор.

Вот инструменты, которые помогут в тестировании писем:

• accessible-email.org от Джорди ван Рейн и Маартен Лиероп — этот инструмент проверяет, совместим ли ваш код с любым средством чтения экрана. Инструмент даже поможет оптимизировать код;
• Accessibility Checker, инструмент от Parcel, который помогает оценить письмо на предмет инновационных практик и проблем доступности. Он классифицирует выявленные проблемы по степени серьезности: критические, серьезные, умеренные и незначительные. Это облегчает определение приоритетов при исправлении ошибок;
• Campaign Precheck от Email on Acid — проверяет, оптимизировано ли письмо для вспомогательных устройств;
• Accessible Colors для проверки цветового контраста текста и других элементов письма, за исключением изображений;
• WebAIM (web accessibility in mind) — проверка цветового контраста. Учитывает не только цвета, но и размеры шрифтов для каждого конкретного случая;
• Coblis, симулятор цветовой слепоты — показывает, доступны ли ваши изображения для людей, страдающих дальтонизмом;
• Trace RERC (PEAT) для проверки соответствия GIF-файлов рекомендуемым ограничениям по частоте кадров.

Эксперты и ресурсы, которые помогут узнать больше о доступности в цифровых технологиях и письмах

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

1. Сара Галлардо, ведущий email-разработчик Oracle. Сара — известный специалист по доступности писем. Она предлагает обширные рекомендации и стандарты доступности. Ее опыт помогает организациям соответствовать лучшим практикам доступности с помощью углубленных образовательных материалов.
2. Майк Пачиелло, главный специалист по доступности AudioEye. Активно доносит до представителей брендов важность доступности, используя для этого новейшие статистические и аналитические данные. Его работа имеет ключевое значение для того, чтобы мотивировать компании внедрять и приоритизировать доступность.
3. Томас Логан предоставляет экспертные консультации по вопросам доступности, помогая организациям гарантировать доступность их цифрового контента для всех. Его услуги включают обучение, комплексные аудиты и стратегические рекомендации, соответствующие строгим стандартам доступности.
4. Марк Роббинс, убежденный сторонник доступности, делится своим богатым опытом и предлагает эффективные рекомендации и инновационные решения для email-маркетологов. Его внимание к обеспечению доступности коммуникаций приносит пользу как отправителям, так и получателям.
5. Пол Эйри, специализирующийся на дизайне и разработке рассылок, применяет бихевиористскую науку для повышения удобства использования и доступности писем. Его подход не только оптимизирует пользовательский опыт, но и гарантирует, что письма будут понятны всем и удобны для навигации.
6. WCAG устанавливает международные стандарты доступности, предлагая структуру, в которой детально описывается, как сделать цифровой контент доступным для людей с ограниченными возможностями. Эти правила и рекомендации по доступности необходимы для разработчиков контента по всему миру.
7. Email markup consortium от Parcel, возглавляемый экспертами по доступности, в т .ч. Марком Роббинсом, предлагает ключевые материалы для повышения доступности писем. Включает в себя отчеты, подробный глоссарий и список распространенных ошибок с решениями; все они направлены на оптимизацию стандартов сферы.
8. A11y.email (ведет Сара Галлардо), — блог, предлагающий детальные материалы по доступности писем, которые охватывают такие темы, как эффективный alt-текст, осмысленные ссылки, HTML-семантика и цветовой контраст. Также в наличии инструменты и методы тестирования доступности для разработчиков и email-маркетологов, чтобы сделать письма идеальными.
9. AudioEye (ведет Майк Пачиелло), — блог предлагает массу информации о цифровой доступности. Здесь представлены статьи об инновационных методах, рекомендации по соблюдению требований и новейших трендов доступности, помогающие брендам гарантировать инклюзивность и доступность цифрового контента для всех пользователей.
10. Блог Equal Entry (ведет Томас Логан), — содержит подробные статьи о цифровой доступности. Он охватывает такие инновационные темы и практики, как GenAI в аспекте доступности писем, сайтов и видеоигр, стремясь таким образом сделать цифровой контент инклюзивным для всех.
11. British dyslexia association повышает осведомленность и поддерживает людей с дислексией, предоставляя ресурсы, информацию и рекомендации по созданию и обеспечению доступности цифрового контента и его адаптации для людей с дислексией.
12. Yale University предлагает статьи и ресурсы по веб-доступности, в том числе инновационные методы создания доступных ссылок и другого цифрового контента.

В завершение

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