Accessibility в email-розсилках: як робити листи доступніше

Гліб Клюйко

Технічний райтер

Чому Accessibility є одним із важливих трендів email-маркетингу

Чому Accessibility є одним із важливих трендів email-маркетингу + прості поради, як робити розсилки доступними

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

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

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

Accessibility –

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

Адаптація листа для читання скрінрідерами

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

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

Last post

Робіть теми листів інформативними

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

Адаптуйте шаблони

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

Щоб цього не трапилося, додайте до рядка код.

role=”presentation”

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

role=”presentation”

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

Спробуйте можливості eSputnik!

Використовуйте заголовки

Обгортайте заголовки листа в теги h1, h2 та ін. І виділяйте абзаци тегами p.

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

У редакторі eSputnik ви легко налаштуєте оформлення всіх заголовків у інтерфейсі листа, код правити не доведеться.

Інтерфейс редактора eSputnik

Встановіть HTML-атрибут мови

Укажіть на початку HTML-коду листа атрибут мови, якою він написаний: lang = "" (en, ru або інше скорочення відповідно до списку кодів мов HTML). Цей код вкаже скрінрідерам, якою мовою відтворювати контент листа.

Зовнішнє оформлення

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

Використовуйте кольоровий контраст

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

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

Особливості сприйняття кольорів

Передавайте важливу інформацію в текстовому форматі

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

Додавайте до зображень інформативний альтернативний текст: більшість скрінрідерів читають його. У eSputnik ви легко зробите це безпосередньо в інтерфейсі редактора.

Інтерфейс редактора eSputnik

Не використовуйте занадто довгі речення та вузькоспеціальні терміни. Мова письма має бути простою та зрозумілою. Ефективний спосіб перевірити емейл на предмет відповідності цим вимогам — прочитати його вголос.

Оформлюйте текст доступно

Використовуйте розмір шрифтів не менший за 14 пікселів. Чим світлішим є шрифт, тим більшим він має бути.

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

Залишайте більше простору

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

Оформлюйте посилання інформативно

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

Будьте обережні з гіфками

Гіф-зображення непогано привертають увагу, але можуть викликати сильний дискомфорт в одержувачів з дислексією та порушеннями зору. В інструкції із забезпечення доступності веб-контенту (WGAG) рекомендується обмежити частоту зміни зображень трьома на секунду. Також варто уникати чергування занадто яскравих кольорів.

Резюмуємо

Щоб ваші розсилки були доступні всім вашим підписникам без винятку, дотримуйтесь таких рекомендацій:

  • Тема листа має точно відповідати його змісту.

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

  • Використовуйте семантичну розмітку в коді листа.

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

  • Створюйте зрозумілий контент, який не потребує додаткової візуалізації.

  • Використовуйте контрастні кольори та великий шрифт.

5.0 з 5 на основі 2 оцінок

Гліб Клюйко

Технічний райтер

Коментарі 0