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

Якщо ваш лист не доступний, це означає, що він зламаний.

Марк Робінс,

інженер-програміст 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-дизайні свідчить про гостру потребу в поінформованості та в імплементації інноваційного досвіду. Прийнявши для себе всеохоплюючі рекомендації, викладені в цій статті, маркетологи та розробники матимуть змогу потужно покращити кастомний досвід широкої аудиторії, у такий спосіб гарантуючи, що листи будуть не лише добре читаними, але й дійсно доступними для всіх. Подібний підхід не тільки підвищує показники залученості, але також відображає відданість ідеям інклюзивності в цифрових комунікаціях.