email-accessibility-guidelines-standards-best-practices
02 серпня 2023

Гайдлайни з доступності листів: стандарти та найкращі практики

Створити доступні листи
Зміст
  1. Чому доступність листів є обов'язковою вимогою
  2. Що таке доступність листів?
  3. Стандарти доступності листів для кожного типу порушень
  4. Універсальні гайдлайни з доступності листів
  5. Інструменти тестування доступності
  6. На завершення
1.
Чому доступність листів є обов'язковою вимогою

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

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

Чому доступність листів є обов'язковою вимогою

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

Reasons to maintain email accessibility _ Insightful stats

Просто уявіть, що у нашому світі:

Що таке доступність листів?

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

Типи порушень, які ускладнюють читання або навіть унеможливлюють його

Сліпота

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

Порушення зору

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

Дальтонізм

Дальтонізм також відомий як дефіцит кольорового бачення (DVC). Такі люди не розрізняють певні кольори. Хтось не бачить червоного, хтось синього або зеленого. А дехто взагалі не сприймає кольори і бачить лише відтінки сірого.

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

Дислексія

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

На дислексію страждають актриса Дженніфер Еністон, кінорежисер Стівен Спілберг, мільярдер Річард Бренсон та багато інших відомих людей.

Світлочутлива епілепсія

Фотосенситивна епілепсія — це розлад, при якому напади провокуються мерехтливими або контрастними вогнями. Кожен сотий мешканець Землі страждає на епілепсію, з них п'ятеро — саме на фотосенситивну.

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

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

Стандарти доступності листів для кожного типу порушень

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

1. Спеціальні вимоги доступності листів для сліпих

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

Але чи знаєте ви, що 7,7% з тих, хто користується скрінрідерами, не мають жодних порушень зору? Вони просто роблять це заради зручності.

Відповідно наш обов'язок полягає в тому, щоб зробити email-кампанії оптимізованими для програм читання екрану.

У процесі написання цього розділу гайдлайнів ми консультувалися з такими джерелами:

  1. W3 Schools.
  2. Accessibility.com.
  3. Microsoft.
  4. Email markup consortium.
  5. Email on Acid.
  6. Принстонський університет.
  7. Гарвардський університет.

Як зробити листи «читабельними» для скрінрідерів?

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

Доступність листів _ Налаштування мов для програм читання з екрану _ Stripo

  • встановіть ролі презентації для свого коду листа role="presentation". Більшість HTML-шаблонів складаються з таблиць. Якщо ви не додасте цей елемент коду, одержувачі почують, як допоміжні програми читають весь HTML-код, а не логічний та зрозумілий текст. Додайте ці ролі для кожної таблиці вашого листа. Зверніть увагу, що Stripo автоматично додає цей атрибут у момент експорту листа до вашого ESP або поштового клієнта;

Роль презентації _ Доступність листа

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

Доступність листа _ Додавання CharSet у код _ Stripo

  • використовуйте заголовки та підзаголовки — <h1>, <h2> і т. ін. Організуйте свій контент максимально логічно, щоб його було легко читати і людям, і скрінрідерам;
  • додавайте alt-текст для всіх зображень/GIF-анімацій. Програми читання екрану не вміють «читати» картинки, які ви додаєте до листів, натомість вони можуть прочитати «альтернативний текст», також відомий як alt-текст. Штучний інтелект щойно опановує розпізнавання зображень. Переконайтеся, що ваш alt-текст чіткий та інформативний;
  • завжди дублюйте важливу інформацію з малюнків та гіфок під зображеннями;
  • уникайте смайликів, оскільки вони складаються з розділових знаків і втрачають сенс під час прочитання з використанням допоміжних технологій;
  • використовуйте тільки програмно відформатовані марковані та нумеровані списки;
  • робіть текст посилань інформативним усюди, де це можливо, щоб люди знали, що і де клікати. Просто порівняйте ці два посилання:

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

2. Спеціальні вимоги доступності для людей з розладами зору

Як ми вже казали вище, за даними Всесвітньої організації охорони здоров'я (ВООЗ) 2,2 млрд людей у сучасному світі страждають на порушення зору.

Форми розладів зору:

  1. Втрата центрального зору.
  2. Втрата периферійного зору.
  3. Нечіткий зір.
  4. Порушення зору після черепно-мозкових травм.

У процесі написання цього розділу гайдлайнів ми консультувалися з такими джерелами:

  1. Inclusive city maker.
  2. ВООЗ.
  3. Додаткова інструкція для WCAG 2 (W3 Schools).

Як зробити листи читабельними для людей з порушеннями зору?

  • уникайте використання римських цифр;
  • вибирайте розбірливі шрифти. Вдалим рішенням будуть шрифти групи Sans serif (без засічок);
  • використовуйте міжрядкові інтервали між словами, реченнями, рядками, абзацами та блоками тексту. Це усуває безлад у тексті. Зверніть увагу: пробіл не означає колір фону, тобто він не обов'язково має бути насправді білим.

3. Спеціальні вимоги доступності листів для людей з дальтонізмом

Дальтонізм буває кількох типів:

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

Приклад контрасту кольорів тексту та фону

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

Приклад того, як незрячі люди бачать кольорові листи

(Так його бачать люди із протанопією. Червоні помідори, червоне м'ясо та бекон виглядають зеленими, як і листя салату поряд з ними, що ускладнює визначення начинки бургера)

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

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

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

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

Палітра з кольорами _ Те, як люди з дальтонізмом бачать різні кольори

У процесі написання цього розділу гайдлайнів ми консультувалися з такими джерелами:

  1. Colour blind awareness.
  2. Accessible colors.
  3. Colbldindor — симулятор колірної сліпоти.
  4. Йєльський університет
  5. Пітсбурзький університет.

Як зробити листи доступними для людей з дальтонізмом?

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

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

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

4. Спеціальні вимоги доступності листів для людей з дислексією

Враховуючи факт існування кількох типів дислексії, важливо знати, що усі люди з дислексією різні — і те, що вони бачать, залежить від типу дислексії, на яку вони страждають, і ступеня тяжкості дислексії.

Що бачать люди з дислексією?

За даними NeuroHealth, вони можуть бачити:

  • літери та цифри у дзеркальному відображенні;
  • літери та цифри догори дригом;
  • також вони можуть не розрізняти візуально подібні літери, наприклад e, c та o;

Email accessibility _ Example of how some dyslexic readers see the letters

(Джерело: Деніел Бріттон)

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

Приклад того, як читачі з дислексією бачать текст

У процесі написання цього розділу гайдлайнів ми консультувалися з такими джерелами:

  1. Європейська асоціація дислексії.
  2. Британська асоціація дислексії.
  3. Dyslexia Style (гайд Британської асоціації дислексії).
  4. E-learning heroes.
  5. Деніел Бріттон.

Як зробити листи читабельними для людей, що страждають на дислексію?

  • уникайте підкреслення або курсиву — використовуйте для виділення жирний шрифт;
  • це також стосується посилань — не варто підкреслювати їх. Натомість використовуйте жирний шрифт;
  • міжрядковий інтервал має бути 150%;
  • уникайте СУЦІЛЬНОГО КАПСУ для довгого тексту. Літери нижнього регістру легше читати;
  • використовуйте шрифти без засічок, наприклад, Arial або Comic Sans, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri та Open Sans;
  • застосовуйте додатковий простір навколо заголовків та між абзацами;
  • використовуйте однотонні фони. Уникайте фонових візерунків або зображень;
  • фон не має бути білим; зробіть його кремовим для читачів з дислексією, оскільки текст, написаний на кремовому фоні, має більш м'який вигляд;
  • дотримуйтесь достатнього контрасту фону і тексту;
  • використовуйте заголовки;
  • пишіть короткі речення. Оптимальна довжина 60-70 символів;
  • вирівнюйте текст із орієнтацією ліворуч, без розтягування.

5. Спеціальні вимоги доступності листів для людей з фотосенситивною епілепсією

Чи знаєте ви, що епілептичні напади можна спровокувати, усього лише неправильно використовуючи GIF-анімації в листах?

Що спричиняє світлочутливі напади:

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

У процесі написання цього розділу гайдлайнів ми консультувалися з такими джерелами:

  1. Суспільство епілепсії, Велика Британия.
  2. Фонд епілепсії, США.
  3. Фотосенситивні напади: Оновлений огляд Фонду епілепсії
  4. Accessible web.

Як зробити листи безпечними для людей з фотосенситивною епілепсією?

  • додавайте лише одне анімоване GIF-зображення на один скрол екрану;
  • використовуйте GIF-ки з частотою 2 кадри на секунду.

Універсальні гайдлайни з доступності листів

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

Деякі рекомендації вище були суперечливими, тож нам довелося шукати компроміс. Наприклад, для дальтоніків ми маємо підкреслювати посилання або виділяти їх жирним шрифтом, а для дислексиків — тільки жирним шрифтом. Компроміс тут полягає у використанні напівжирного шрифту для посилань.

Отже, ось наші універсальні рекомендації з доступності листів:

  1. Зазначте мову листа, роль презентації й тип контенту для програм читання екрану.
  2. Використовуйте заголовки та підзаголовки — <h1>, <h2> і т. ін., аби логічно впорядкувати контент і зробити його розбірливим для скрінрідерів.
  3. Завжди! Чуєте, ЗАВЖДИ додавайте alt-текст до всіх зображень та GIF-анімацій.
  4. Якщо GIF-анімація виконує навчальну місію, обов'язково додайте до неї деталізований текстовий опис.
  5. Уникайте смайликів.
  6. Використовуйте лише програмно відформатовані марковані та нумеровані списки.
  7. Робіть текст посилання інформативним.
  8. Вибирайте шрифти без засічок.
  9. Встановіть міжрядковий інтервал приблизно 150%.
  10. У дужках зазначайте кольори предметів.
  11.  Перевірте контрастність кольору тексту та зображень.
  12. Уникайте СУЦІЛЬНОГО КАПСУ для довгого тексту; натомість використовуйте малі літери більшого розміру.
  13. Використовуйте однокольорові, але не зовсім білі фони.
  14. Пишіть короткі речення.
  15. Вирівнюйте текст із орієнтацією ліворуч без розтягування.
  16. Додавайте на один скрол екрану лише одну GIF-анімацію.
  17. Використовуйте GIF-файли з частотою 2 кадри на секунду.

Інструменти тестування доступності

Коли ви закінчите розробку кампанії, перевірте її за допомогою інструментів тестування доступності та/або озвучте у скрінрідері.

Ось інструменти, які допоможуть вам з перевіркою листів:

  • accessible-email.org від Джорді ван Рейн та Маартен Ліроп — цей інструмент перевіряє, чи сумісний код листа з програмою читання екрана. Інструмент навіть допоможе вам оптимізувати код;
  • Campaign precheck accessibility check від Email on Acid — перевіряє, чи оптимізований ваш лист для допоміжних програм;
  • accessible colors перевірить кольорову контрастність тіла листа (текст та інші елементи, окрім зображень);
  • Coblis, симулятор колірної сліпоти — перевіряє, чи доступні ваші зображення для дальтоніків;
  • Trace RERC для перевірки GIF-анімацій на частоту кадрів;
  • Stripo (незабаром) — найближчим часом ми зможемо перевіряти доступність вашого коду, кольоровий контраст, наявність alt-тексту для зображень і т. ін.

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

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

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

Створюйте доступні листи разом зі Stripo
Чи була ця стаття корисна?
Tell us your thoughts
Дякуємо за ваш відгук!
5 коментарів
Dennis Brown 1 рік тому
Really helpful advice, thank you. However, as a 'red-blind' person, I obviously can't see the difference between the two 'Uber' email screenshots, so I'm still none the wiser as to how it was meant to appear; it would be great (and help your post's accessibility :) if you could add an image of how it was intended to display, or at least point out the difference. Thank you :)
Ганна Кузнєцова 1 рік тому
Dennis Brown, Hello. Oh wow. I sincerely beg your pardon. I was focused on how to show the people who see all colors the difference between how we perceive colors and the importance of making emails accessible, and it never occurred to me that we also need to explain this difference. But we sure do. This only proves that we need to make our sites and emails more accessible. As for the image... I am sorry, I don't really know how exactly we can show it so that "red-blind" people notice the difference (I'll search, I promise). But for now, we've added some description under the second email: meat, bacon, and tomatoes are red in the first Uber screenshot. But in the second screenshot (in my opinion, and I may be wrong, please correct me if I am), it's hard to tell what food is in the burger because everything looks green. Once again, I am terribly sorry for this huge mistake of mine. Thank you very much for bringing our attention to it.
Dennis Brown 1 рік тому
Thank you, Hanna :) And the addition of the description does help, perfectly - thank you. As for how I see it, good question! The main thing for me is just how identical the two images look, though it's difficult to describe what colours I 'see' the items as; if pushed, I'd say they just look bland; I definitely (and unsurprisingly, I guess) don't see anything in them that I'd describe as red. Incidentally, your post did serve a further purpose, highlighting to my family the difference in how I see colours - with all of them appreciating (possibly for the first time) how different our colour-vision can be. Thanks for such a helpful post ?
Courtney Cannon 1 рік тому
Hello! What email accessibility tester tools are you using to ensure the emails are accessible before emailing them out?
Ганна Кузнєцова 1 рік тому
Hello, Courtney. Thank you for your question. We are sorry for not getting back to you sooner. Currently, we use Email on Acid precheck. It helps us check line spacing for the copy when it's zoomed in and some other things. We also use Coblis, Color Blindness Simulator, to check the color contrast ratio and stick to the best practices shared in this post. If you know any other tools, please share them with us - we'll be happy to try them. Thank you. And eventually, we're going to add the "Email accessibility pre-check" to Stripo; it will highlight all the issues and will give hints on how to fix them.
Тип
Індустрія
Сезони
Інтеграції
Редактор Stripo
Спростіть процес створення листів.
Плагін Stripo
Інтегруйте Drag-n-Drop редактор Stripo у свій веб-додаток.
Замовити власний шаблон
Наша команда може розробити і зверстати його для вас. Просто заповніть бриф, і ми зв'яжемося з вами найближчим часом.

Редактор Stripo

Для команд фахівців з email-маркетингу та індивідуальних розробників листів.

Плагін Stripo

Для продуктів, які можуть ефективно використовувати інтегрований white label конструктор листів.