Гайд із забезпечення доступності електронних листів: стандарти та найкращі практики

Email-маркетинг допомагає бізнесу охоплювати велику аудиторію, конвертувати її у клієнтів та надавати високоякісний сервіс. І в цій аудиторії обов'язково будуть люди з різними формами недієздатності (вадами зору, слуху тощо). Головне завдання будь-якого бізнесу — зробити так, щоб такі клієнти не почувалися ущемленими, і доступні листи — один зі способів досягнення цієї мети.

Доступність у листах є обов'язковою умовою з трьох причин:

• щоб відповідати нормам законодавства;

• це принесе вам більше кліків, конверсій та, як наслідок, більший дохід;

• не варто бути безсердечними.

Тільки уявіть, що 2,2 мільярди людей у ​​всьому світі мають проблеми із зором навіть з окулярами, чи різні вади зору. 20% (1,5 мільярди людей) населення планети живе з втратою чи різними вадами слуху. Крім того, близько 9-12% населення планети страждає на дислексію.

Що таке доступність електронних листів та як зробити їх доступними?

Чи відомо вам, що люди, які страждають на сліпоту і порушення зору, при відкритті електронних листів користуються програмами читання з екрану (VoiceOver для Mac, Microsoft Narrator для Windows і т. д.)? Ця допоміжна технологія переказує вміст екрану штучним голосом.

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

Як створювати доступні листи, щоб допомогти всім цим людям побачити ваше повідомлення без проблем? Ми поділимося стандартами доступності електронних листів та покажемо вам кілька порад та прийомів, які допоможуть легко створювати такі листи.

Стандарти доступності електронних листів

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

1. Вимоги до доступності електронних листів при дальтонізмі

Дальтонізм має декілька типів:

Протанопія характеризується зниженою чутливістю до червоного кольору. Ці люди, яких також називають «червоносліпими», схильні плутати чорний колір з багатьма відтінками червоного, темно-коричневий з темно-зеленим, а деякі відтінки синього із середніми відтінками червоного.

(оригінальний лист від Uber)

(ось як це бачать люди з протанопією)

Дейтеранопія характеризується зниженою чутливістю до зеленого кольору. Зеленосліпі люди також схильні плутати середньо-червоні кольори із зеленими, яскраво-зелені з жовтими, а світло-блакитні з бузковими.

Тританопія викликає у людей сліпоту до синього кольору та його відтінків. Ось чому люди, які страждають на тританопію, плутають світло-блакитний із сірим, а темно-фіолетовий з чорним.

Монохромія робить людей повними дальтоніками. Вони бачать лише відтінки сірого, що варіюються від чорного до білого.

(оригінальний лист від Premiere League)

(так це бачать монохроматики)

Посилання в листах

Якщо ви додаєте посилання до деяких слів у тексті, зробити його синім недостатньо. Люди з дальтонізмом або ті, хто читає листи на мобільному пристрої, коли сонце світить просто на екран, можуть не помітити різниці в кольорі. Зробіть цей текст жирним. Уникайте підкреслення тексту посилання, щоб не заплутати читачів з дислексією.

(Джерело: лист від Epilepsy Foundation)

Заголовок статті блогу виділено жирним шрифтом. Завдяки цьому простому прийому всі одержувачі знають, що вони повинні натиснути на назву публікації в блозі або на кнопку CTA, яка також виділена жирним шрифтом.

Що ми можемо зробити, щоб електронні листи стали доступними для дальтоніків?

• виділяти текст посилання жирним шрифтом;
• уникати використання зеленого та червоного кольорів як контрастних. Наприклад, не застосовуйте зелений колір до тексту, написаного на червоному фоні, і навпаки;
• перевіряти контрастність кольорів у своєму листі. Це одне з основних правил контрасту, про яке ми поговоримо трохи згодом;
• завжди вказувати назву кольору предметів у дужках — люди можуть погано бачити кольори, але можуть здогататися, що червоний їм підходить;
• якщо ви використовуєте інтерактивні елементи для запуску тестів у листах та виділяєте правильні відповіді, скажімо, зеленим кольором, а неправильні — червоним, обов'язково позначте правильну чи неправильну відповідь словами.

(Джерело: лист від HubSpot. Гарний приклад)

Як дізнатися, які кольори люди схильні плутати?

У світі налічується близько 300 мільйонів людей з вадами сприйняття кольору. 1 із 12-ти чоловіків є дальтоніком (8%), і 1 із 200 жінок (0,5%).

На цій картинці показано, які кольори зазвичай плутають дальтоніки:

Ось чому дуже важливо перевірити, чи всі дальтоніки можуть читати ваші листи. Використовуючи цей безплатний інструмент, ви побачите свої зображення такими, якими їх бачитимуть деякі одержувачі. Будь ласка, робіть це завжди — дбайте про своїх клієнтів та підписників.

Коефіцієнт контрастності кольору

Ще один спосіб створення доступного змісту для дальтоніків — використання відповідного контрасту кольорів у всіх елементах дизайну. Дальтоніки все ще можуть сприймати контраст та відмінності у відтінках, насиченості та яскравості. Тому ви можете використовувати це у своїх інтересах під час створення email-кампаній.

(Джерело: University of Pittsburgh)

Ви можете перевірити це за допомогою цього інструменту. Він навіть дасть вам кілька рекомендацій про те, які кольори слід замінити, щоб отримати ідеальне поєднання.

2. Вимоги до доступності електронних листів для незрячих

Ситуація з листами для незрячих людей зовсім інша. Тут може допомогти відсутність контрастних кольорів. Ці люди користуються програмами для читання з екрану на десктопах і мобільних пристроях.

Отже, наше завдання — зробити свої email-кампанії такими, щоб ці засоби могли їх прочитати.

Працюйте над темами листів

Як і звичайний одержувач, програма читання з екрану читає листи, починаючи з рядка теми.

Це загальновизнана істина, що теми листів мають бути короткими та змістовними. Інакше кажучи, правильна тема листи повинна відображати загальну ідею повідомлення.

Як це налаштувати за допомогою Stripo:

• клікніть на кнопку «Експорт» над шаблоном;

• введіть тему листа та передзаголовок у відповідні поля.

Для вашої зручності Stripo навіть показує довжину рядка теми та підраховує, скільки символів ви вже використали.

Встановіть мову

Я вирішила прослухати кілька повідомлень з папки «Вхідні» за допомогою програми читання з екрану. Це було жахливо. Цей інструмент не визначав мови і читав все в моторошній мішанині. Я чула, що встановлення атрибута language в коді може допомогти. Встановлюючи атрибут мови для листа, ми вказуємо програмам читання з екрану, як вони повинні вимовляти або відображати вміст вашого повідомлення. В іншому випадку лист буде просто прочитаний мовою за замовчуванням. І відповідно до інструкцій, наведених в інтернеті, прямо в HTML-коді шаблону листа я задала Eng для всього листа.

Виглядало це наступним чином:

Знаєте що? Це спрацювало!

Цей прийом можна застосувати не тільки англійською, а й багатьма іншими мовами. Вам просто потрібен доступ до списку мовних кодів, які можна додати до HTML-коду листа.

Призначте ролі презентації

Всі HTML-шаблони листів складаються з таблиць, які знаходяться «під капотом» листа. Якщо ви не додасте відповідні налаштування для читання з екрану, користувачі будуть чути, як ці допоміжні програми читають повністю HTML-код замість логічного і зрозумілого тексту. Саме тому ви повинні додати атрибут role="presentation" до кожної таблиці у своєму листі. В результаті ви повинні отримати щось на кшталт цього:

Важливо зазначити:

Stripo автоматично додає цей атрибут.

Спочатку його не видно в редакторі коду під час створення листа, але він там присутній. 

Достатньо просто експортувати лист у вигляді HTML-коду з увімкненою опцією Підтримка доступності. Відкривши файл, ви побачите, що всі атрибути презентації на місці.

Закодуйте символи

Те, як відображатиметься вміст листа, залежить від Content-Type. Вам необхідно додати <charset="UTF-8"> до HTML-коду свого листа відразу після "<head>", оскільки це найпопулярніше кодування, що підтримує переважну більшість символів.

На щастя, у всіх листах, створених за допомогою Stripo, цей набір вже заданий у листах.

Дотримуйтесь логічної послідовності

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

При складанні доступних електронних листів обов'язково використовуйте в HTML-коді такі елементи, як <h1> і <p>. Теги <h1>, <h2> матимуть перевагу перед звичайним текстом у тому самому контейнері і будуть прочитані першими.

Примітка: не має значення, який шрифт ви задасте для певних частин тексту. Якщо там немає тегів <h1>, <h2>, то вони будуть рівнозначними для програми читання з екрану, навіть якщо розмір шрифту 32 px або більше.

У цьому прикладі текст заголовку 2 має розмір 24 ​​px, а звичайний шрифт тексту — 27 px. Але програма читання з екрану «прочитає» заголовок 2 першим.

Додайте альтернативний текст

Програми читання з екрану не можуть читати зображення, які ви використовуєте в листах. Але вони можуть читати «альтернативний текст», або альт-текст.

Це корисно не тільки для людей з вадами зору, які користуються програмами для читання з екрану, але й для всіх інших одержувачів, оскільки деякі поштові клієнти за замовчуванням блокують зображення. Крім того, іноді картинки не можуть бути завантажені через повільне інтернет-з’єднання. Ви надасте собі послугу, додавши альт-текст до кожного зображення. Переконайтеся, що він зрозумілий та інформативний. Але уникайте використання слова «картинка» в альт-тексті, тому що на це вже вказує її тег. Саманта Коннеллі у своєму дописі щодо доступності електронних листів каже, що це викликає певне роздратування.

Так виглядає альт-текст у HTML-коді листа:

Як задати альт-текст за допомогою Stripo:

Після вставки фото/картинки в контейнер на панелі налаштувань з'являться порожні поля для вставки альт-тексту та посилань.

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

Примітка: якщо ви використовуєте GIF-ку, щоб показати, як застосовувати/встановлювати/носити предмети свого продукту, не забудьте також надати одержувачам письмовий мануал або, принаймні, вставити посилання на ваш сайт, де ви докладно пояснюєте, як це робити.

Попрацюйте над посиланнями

Посилання у листах теж мають бути змістовними. Додайте чіткий та лаконічний текст! Дайте людям зрозуміти, на що вони збираються натиснути і де вони це отримають.

Просто порівняйте ці два посилання:

Перше посилання не повідомляє покупцю, про що йдеться, тоді як друге вказує сайт та місце призначення.

Якщо цікаво, перше посилання привело мене на сторінку підписки. Але як би людина, яка користується програмою для читання з екрану, перейшла за цим посиланням?

Примітка: я створила безліч листів за допомогою різних редакторів і надіслала їх через безліч ESP, потім протестувала ці листи в різних програмах для читання з екрану різними мовами, і ось що вийшло:

• Windows взагалі не «читав» посилання;

• Macintosh VoiceOver читав посилання повністю;

• Android TalkBack не читав посилання, а говорив: «Посилання — натисніть двічі, щоб відкрити його».

Деякі операційні системи повинні навчитися взаємодіяти з програмами читання з екрану, щоб полегшити життя людей.

Козирні кнопки CTA

Безумовно, основна мета email-маркетингових кампаній — це продаж наших продуктів. Отже, ми повинні приділяти пильну увагу кнопкам CTA. І ми зазвичай так і робимо — використовуємо яскраві кольори, надаємо форму самим кнопкам.

Деякі дослідження показують, що дизайн відіграє набагато більшу роль, ніж зрозумілий текст. У той час як інші дослідження доводять, що дизайн CTA-кнопки листа не збільшує CTR і CTOR. Він просто робить кнопку більш помітною. А текст, що запам'ятовується, робить те, що повинен — закликає підписників натиснути на кнопку.

Ось так ми бачимо цю кнопку:

Програма читання з екрану бачить лише текст самої кнопки.

Іконки соціальних мереж

Stripo дозволяє додавати до листів стільки іконок соцмереж, скільки вам потрібно.

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

Як налаштувати це за допомогою Stripo:

При додаванні іконок соціальних мереж необхідно попрацювати над альтернативними текстами (атрибутами alt).

• клікніть на будь-яку іконку соцмережі у своєму листі;

• потім на панелі налаштувань ви побачите список використаних іконок;

• натисніть «Ще», як показано на скріншоті нижче;

• введіть альт-текст у відповідні поля.

Примітка: у полі Заголовок вже вставлено повну назву, тоді як поле Альт-текст містить лише кілька букв. Ви можете замінити їх на повну назву соцмережі.

Починаючи нову кампанію, обов'язково попрацюйте над текстом, зробивши лист доступним, щоб люди з вадами зору (або ті, хто перевіряє свої поштові скриньки за допомогою Bixby та Siri через велику зайнятість) могли чітко зрозуміти, про що йдеться у вашому листі.

3. Вимоги до доступності електронних листів при дислексії

Читачі з дислексією плутають порядок літер у словах і вважають великі літери у реченні окремими літерами, попри нормальний розумовий рівень.

(одне й те саме речення так, як його бачать читачі з дислексією)

Що ми можемо здійснити, щоб зробити електронні листи доступними для читачів з дислексією?

• не підкреслюйте посилання. Робіть так, як ми говорили декількома абзацами раніше — виділяйте текст, за яким ховаються посилання, жирним шрифтом;

• ніколи не починайте нове речення з кінця рядка — нове речення означає новий рядок у листах;

• ніякого верхнього регістру, якщо ви хочете щось наголосити — збільште розмір шрифту;

• ніколи не додавайте в листи відцентрований текст — лише вирівняний зліва;

• фон не повинен бути білим; зробіть його кремовим для читачів з дислексією — те саме стосується й інших людей, оскільки текст, написаний на кремовому фоні, виглядає м'якшим;

• усі речення в листах мають закінчуватися крапкою (.), а марковані пункти — крапкою з комою (;).

Докладніші вимоги ви знайдете в цьому гайді.

4. Вимоги до доступності електронних листів для глухих

Існує лише одна єдина вимога:

Усі відеоролики, в яких лунають голосові інструкції, повинні супроводжуватись титрами або субтитрами.

(Джерело: відео від Stripo)

Примітка: не розраховуйте на субтитри, які пропонує YouTube. Досить часто вони не працюють належним чином.

На завершення

Наступні поради допоможуть вам у створенні доступних електронних листів:

1. Використовуйте контрастні кольори різних відтінків. Навіть якщо людина плутає деякі середні кольори, наприклад, темно-зелений та темно-коричневий, він ніколи не сплутає світло-зелений з темно-коричневим.
2. Додайте до своїх листів змістовні теми.
3. Завжди! Завжди додавайте альт-текст до всіх зображень.
4. Якщо GIF-ка виконує навчальну місію, обов'язково додайте до неї розгорнутий письмовий опис.
5. Використовуйте лише одну мову в кожному листі, оскільки програми читання з екрану можуть одночасно говорити лише однією мовою. Інша мова в листі просто транслітерується, що унеможливлює розуміння того, що говорить скринрідер будь-якою іншою мовою.
6. Переконайтеся, що всі посилання, вставлені в лист, є змістовними, щоб уникнути проблем з доступністю.
7. Вкажіть Content-Type <charset="utf-8">, щоб зробити всі символи, що використовуються в листах, розбірливими. Мені хочеться нагадати вам, що Stripo вже зробив це за вас.
8. Встановлюйте вирівнювання тексту в листах лише зліва.
9. Створюйте свої листи з любов'ю та турботою про всіх людей.

Після завершення своїх email-кампаній перевірте їх за допомогою інструментів тестування доступності, надішліть копію листа до поштових клієнтів і спробуйте скористатися програмами читання з екрану.