Доступність + інтерактивність в одному листі: взаємовиключні речі чи просто ще одна проблема?

Дехто стверджує, що неможливо створити інтерактивний і водночас доступний лист. Якщо це так, то перед нами постає складний вибір: сказати підписникам з обмеженими можливостями: «Вибачте, цей лист не для вас, пропустіть його», або сказати підписникам без обмежень: «Вибачте, але всі наші листи будуть менш захопливими, без зайвого задоволення і функціональності?». Це справді складне рішення.

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

Коротка інформація про те, чому кожна категорія листів важлива

Більшість із нас уже знайомі з цими категоріями, але давайте коротко розглянемо, чому кожна з них така важлива.

Доступність листів

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

Поговоримо про статистику

Із 8 мільярдів людей у світі:

• 2,2 мільярда мають проблеми з зором;
• 300 мільйонів — дальтоніки;
• 968 мільйонів мають труднощі з руховим апаратом;
• 1,6 мільярда мають когнітивні вади і проблеми з навчанням, враховуючи дислексію і світлочутливу епілепсію.

Не хочу драматизувати, але це 5 мільярдів людей.

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

Інтерактивність листів

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

Поговоримо про статистику

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

Інші переваги інтерактивності

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

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

Пояснення протиріччя між доступністю листів та інтерактивністю

Назвемо кілька основних із них.

1. Конфлікт в кодингу

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

• злам коду листів для забезпечення інтерактивності означає відхилення від визначених стандартів семантичної розмітки;
• відсутність підтримки JavaScript у поштових клієнтах.

2. Конфлікти в дизайні

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

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

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

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

3. Конфлікт в аудіо

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

Обхідні шляхи та поради щодо кожного конфлікту

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

Але давайте пошукаємо спосіб використовувати і те, і інше.

1. Способи усунення конфлікту в кодингу

Перш ніж розібратися в цій проблемі, ми звернулися до Сари Гальярдо з питанням: «Чи є ввічливий і тактовний спосіб повідомити тим, хто користується програмами читання з екрану, що вони можуть просто пропустити гру і перейти безпосередньо до контенту, наприклад, до знижок або анонсів нових продуктів, які часто є метою гри?».

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

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

Не приховуйте інпути

Часто можна зустріти чекбокси та радіоінпути, що мають значення «display: none». Це приховує їх від очей, але також означає, що на них не можна сфокусуватися і клікнути з клавіатури.



Додайте стан фокусу

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

Опишіть взаємодію з програмами читання з екрану

Програми читання з екрану повідомляють щось на кшталт «відмічено радіокнопку 1 з 4». Коли це використовується для чогось на кшталт галереї зображень, це не дуже інформативно. Однак якщо обернути інтерактивний розділ у «role=»group«» з описовою міткою на кшталт «aria-label=»інтерактивна галерея зображень, у якій використовуються радіокнопки для керування слайдами», це може допомогти повідомити одержувачу, на що він може розраховувати.

Онлайн-версія

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

2. Усунення конфліктів у дизайні

Я б краще назвала це «Поради з оптимізації візуальних ефектів, щоб зробити листи інтерактивними та доступними для людей із вадами зору та моторики».

Для людей зі слабким зором

Крім порад щодо оптимізації листів для людей зі слабким зором, ми також рекомендуємо вам:

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

Для дальтоніків

• доповнити кольорові підказки іншими індикаторами. Використовуйте символи та текстові написи, щоб забезпечити доступність інформації без залежності від колірної диференціації;
• не вимагати від одержувачів диференціації за кольором, наприклад, просити їх збирати зелені яйця в кошик 1, а червоні — в кошик 2. Замість цього використовуйте різні предмети на кшталт яєць і яблук.

Для людей з вадами рухових функцій

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

Для людей зі світлочутливою епілепсією:

Крім порад щодо оптимізації листів для людей з фотосенситивною епілепсією, ми також рекомендуємо вам:

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

3. Усунення конфлікту зі звуком

Тут усе доволі просто — додайте субтитри до своїх відео або описи під відео.

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

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

Основні висновки:

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