Найкращі практики у сфері доступності листів: повний гайд на 2026 рік

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

Райан Фелан,

CEO компанії RPEOrigin на вебінарі Stripo.

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

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

Ключові висновки

1. WCAG 2.2 Level AA — це практична мета для команд, що займаються розсилками. Це найпоширеніший бенчмарк у сфері цифрової доступності, який надає командам реалістичний стандарт для вдосконалення текстів, дизайну та коду листів.
2. Доступні листи вигідні як для підписників, так і для компаній. Підписники отримують повідомлення, які вони можуть читати та з якими можуть взаємодіяти без будь-яких перешкод, а компанії зменшують юридичні та репутаційні ризики, підвищують зручність користування та уникають ненавмисного виключення клієнтів.
3. Для забезпечення доступності необхідно, щоб текстовий контент, дизайн, код і тестування працювали як одна система. Зрозуміла мова, змістовний alt-текст, описові посилання, зручний для читання дизайн, семантичний код, автоматичні перевірки, тестування за допомогою скринрідера, навігація за допомогою клавіатури та ручна перевірка — все це сприяє підвищенню доступності листів.

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

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

Ця тема обговорюється вже понад 10 років, проте доступність листів залишається далекою від ідеалу. Згідно з Email Markup Consortium’s 2025 Accessibility Report за 2025 рік, 99,89% протестованих HTML-листів містили серйозні або критичні проблеми з доступністю. У 2024 році цей показник становив 99,97%. Різниця у відсотках може здатися невеликою, але вона все ж свідчить про незначний прогрес: кількість листів без серйозних чи критичних проблем збільшилася з 28 із 409357 листів у 2024 році до приблизно 488 із 443585 листів у 2025 році.

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

WCAG для листів: рівні, принципи і застосування

Закони та стандарти у сфері доступності в усьому світі часто ґрунтуються на Web Content Accessibility Guidelines (WCAG). Розроблений World Wide Web Consortium (W3C), WCAG містить рекомендації щодо того, як зробити цифровий контент більш доступним для людей з обмеженими можливостями. 

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

WCAG ґрунтуються на чотирьох основних принципах, відомих під абревіатурою POUR:

1. Perceivable (сприйнятний): люди повинні мати можливість отримувати доступ до інформації як візуально, так і на слух, а також за допомогою асистивних технологій. Наприклад, текст повинен мати достатню контрастність відносно фону.
2. Operable (придатний для використання): користувачі повинні мати можливість користуватися контентом та орієнтуватися в ньому. Наприклад, інтерактивні елементи повинні працювати без необхідності використання виключно миші.
3. Understandable (зрозумілий): контент має бути зрозумілим, цілісним і прогнозованим. Це передбачає зручний для читання текст, логічну структуру та звичну розмітку.
4. Robust (надійний): контент має коректно відображатися на різних пристроях, у поштовиках та під час використання асистивних технологій, включно зі скринрідерами.

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

WCAG також визначає три рівні відповідності: A, AA та AAA:

• рівень A охоплює базові вимоги до доступності. Це допомагає усунути основні бар’єри, але саме по собі не робить контент повністю доступним. Наприклад, рівень A вимагає, щоб колір не був єдиним засобом передачі змісту;
• рівень AA — це рівень, на який найчастіше посилаються закони, стандарти та політики у сфері доступності. Він базується на рівні A та охоплює ширший спектр потреб користувачів. Для команд, що займаються написанням текстів, WCAG 2.2 Level AA зазвичай є найбільш практичною та рекомендованою метою; 
• рівень AAA — це найвищий і найсучасніший рівень. Його можна використовувати як орієнтир, особливо щодо окремих елементів, але зазвичай він є надто жорстким, щоб застосовувати його як стандартну вимогу до всього контенту.

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

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

Дотримання законодавства: ADA, Section 508 та European Accessibility Act

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

Ось основні положення, про які повинні знати email-маркетологи:

1. Section 508: цей закон поширюється на федеральні агенції США і вимагає, щоб їхні інформаційно-комунікаційні технології були доступними для людей з обмеженими можливостями, зокрема для співробітників та представників громадськості. Сюди можуть входити офіційні цифрові повідомлення, внутрішні системи, документи і листи.
2. Americans with Disabilities Act (ADA): у США ADA забороняє дискримінацію щодо людей з особливими потребами, а цифрову доступність дедалі частіше розглядають як невід’ємну частину рівного доступу до державних послуг та онлайн-ресурсів. Правило DOJ’s 2024 ADA Title II вимагає, щоб вебконтент і мобільні застосунки органів влади штатів та місцевих органів влади відповідали стандарту WCAG 2.1 Level AA. 
3. European Accessibility Act (EAA): EAA встановлює вимоги щодо доступності для багатьох товарів і послуг, пропонованих на ринку ЄС. З 28 червня 2025 року компанії, на які поширюється дія цього регламенту, зобов’язані дотримуватися вимог щодо доступності, причому технічні стандарти, як-от EN 301 549, значною мірою базуються на WCAG. 
4. Accessible Canada Act (ACA): закон ACA спрямований на виявлення, усунення та запобігання бар’єрам, що перешкоджають доступності, в організаціях, які підпадають під федеральне регулювання в Канаді. Нормативні акти ACA передбачають штрафні санкції залежно від ступеня недотримання вимог, причому за більш серйозні порушення передбачені вищі штрафи. 
5. Equality Act 2010: у Великій Британії закон Equality Act 2010 зобов’язує постачальників послуг вносити необхідні зміни, щоб люди з особливими потребами не втрачали доступу до послуг. У сфері цифрових технологій як практичний орієнтир для забезпечення доступності зазвичай використовуються рекомендації WCAG.

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

Чому доступні листи є корисними?

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

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

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

• 2,2 мільярда людей у всьому світі страждають на ті чи інші порушення зору;
• 45 мільйонів людей є повністю сліпими;
• близько 340 мільйонів людей страждають на дальтонізм (приблизно 1 із 12 чоловіків і 1 із 200 жінок);
• 1,2 мільярда людей живуть із дислексією (15% населення світу), що позначається на їхній здатності читати і сприймати текст;
• 430 мільйонів людей мають незворотну втрату слуху;
• близько 5% людей з епілепсією страждають на фотосенситивну епілепсію, за якої миготливі зображення можуть викликати напади;
• 12,2% населення США мають серйозні проблеми з моторикою;
• багато хто також стикається з ситуативними чи тимчасовими обмеженнями, як-от травми чи вікові зміни.

2. Бізнес також отримує вигоду

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

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

Райан Фелан,

CEO компанії RPEOrigin на вебінарі Stripo.

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

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

Майк Пачелло,

Chief Accessibility Officer компанії AudioEye в інтерв’ю для Stripo.

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

Кроки зі створення доступних листів

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

Вам також може сподобатися

Чому цифрова доступність є важливою і як почати роботу над її забезпеченням

Ось як це зробити:

Крок 1. Написання доступного тексту для листів

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

Рекомендації зі створення доступного тексту:

• складайте лаконічні тексти, щоб читачі могли швидко зрозуміти суть, не зациклюючись на довгих реченнях;
• використовуйте просту мову, зрозумілу учневі 7-8 класу; уникайте складного жаргону чи академічних термінів;
• встановіть міжрядковий інтервал приблизно на 1,5;
• розбивайте текст на секції з чіткими підзаголовками, щоб листи було простіше переглядати;
• використовуйте заголовки, а не просто збільшуйте розмір шрифту.

Крок 2. Оптимізація alt-тексту

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

Для початку давайте розберемося у різниці між атрибутом alt та alt-текстом:

• атрибут alt — це атрибут HTML, який використовується в елементі image;
• alt-текст — це контент, що міститься в атрибуті alt.

Хоча ці терміни часто вживаються як синоніми, вони мають різне значення.

Давайте подивимося, що відбувається, коли атрибут alt відсутній:

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

(Джерело: вебінар із Сарою Галлардо)

Найкращі практики використання альтернативного тексту:

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

Поганий приклад: сорочка.

Гарний приклад: чоловіча біла сорочка з довгими рукавами та синіми ґудзиками.

Зверніть увагу, що в Stripo можна використовувати AI для генерування alt-тексту. AI від Stripo аналізує зображення та пропонує для нього змістовний і конкретний alt-текст.

Вам також може сподобатися

Крок 3. Забезпечення доступності посилань

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

Найкращі практики у сфері доступних посилань:

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

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

Вам також може сподобатися

Крок 4. Оптимізація email-дизайну з урахуванням вимог доступності

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

Люк Гласнер,

Director of email deliverability у ZeroBounce для Stripo’s Email Trends 2026.

З огляду на свою складність цей етап поділено на кілька груп.

Група 1. Рекомендації з доступності при форматуванні тексту

Види обмежень: люди з ослабленим зором, користувачі скринрідерів і дислектики.

• уникайте використання великих літер, оскільки вони можуть бути неправильно сприйняті людьми з дислексією, а скринрідери можуть сприймати їх як абревіатури;
• використовуйте розділові знаки в кінці маркованих списків і заголовків;
• зведіть до мінімуму використання курсиву і підкреслення для виділення тексту та повністю уникайте поєднання курсиву з підкресленням;
• підкреслюйте текст лише в тому випадку, якщо це гіперпосилання;
• WCAG не встановлює мінімальний розмір шрифту. Однак для забезпечення належної читабельності прагніть до розміру не менше 14 пікселів на десктопах і 16 пікселів на мобільних пристроях;
• використовуйте доступні шрифти, як-от OpenDyslexic, Comic Sans, а також шрифти без зарубок, наприклад Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri та Open Sans;
• вирівнюйте основний текст за напрямком читання мови: зліва для мов, що читаються зліва направо, і справа для мов, що читаються справа наліво. Уникайте центрування основного тексту, вирівнювання за шириною та ручних розривів рядків.

Хоча Success Criterion 1.4.8 (відповідність рівню AAA) це допускає, відповідно до найкращих практик рекомендується уникати вирівнювання тексту за шириною з зазначених причин. Вирівнюйте текст лише за одним краєм.

Давід Геворкян,

CEO / засновник компанії Be Accessible.

Група 2. Робота з кольорами

Види обмежень: люди з дальтонізмом, слабким зором та дислексією.

• забезпечте достатню контрастність між текстом і зображеннями: для тексту розміром менше 16 пікселів (жирний шрифт) та 24 пікселів (звичайний шрифт) вона має становити 4,5:1, а для тексту, що перевищує цей показник, — 3:1;
• перевіряйте контрастність у світлому та темному режимах;
• використовуйте одноколірний фон; 
• це не є конкретною вимогою WCAG 2.2, але рекомендується фахівцями з British Dyslexia Association: текст чисто чорного кольору на чисто білому фонi може здаватися занадто різким для деяких читачів із дислексією; замість цього використовуйте текст темного кольору на фоні, що не є цілком білим;
• не варто використовувати лише кольори для виділення важливої інформації в листах;
• при використанні зображень для позначення правильних чи неправильних відповідей (за допомогою червоного та зеленого кольорів відповідно) або тенденцій у цифрах, для більшої наочності доповнюйте їх текстовими описами або знаками «+» і «-».

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

Група 3. Робота з зображеннями

Види обмежень: люди з дальтонізмом, слабким зором, дислексією та фотосенситивною епілепсією. 

Тут йдеться про GIF-ки і статичні зображення:

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

Крок 5. Забезпечення відповідності вимогам доступності в коді листів

Види обмежень: підтримка користувачів скринрідерів та інших видів асистивних технологій.

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

• використовуйте теги абзацу для основного тексту: обгорніть важливі блоки тексту тегами <p>, щоб лист мав чітку структуру;
• використовуйте теги заголовків: використовуйте теги <h1> і <h6> для структурування тексту та полегшення навігації текстом для користувачів скринрідерів;
• верстайте списки правильно: використовуйте елементи <ul> і <li> замість булетів, емодзі чи символів, які відображаються лише візуально;
• правильно працюйте з таблицями розмітки: оскільки в HTML-листах для забезпечення правильного відображення часто використовуються таблиці, переконайтеся, що таблиці розмітки мають атрибут role="presentation" або role="none", щоб скринрідери не сприймали їх як таблиці даних;
• додайте відповідні атрибути alt: використовуйте змістовний alt-текст для інформаційних зображень та порожній атрибут alt="" для декоративних зображень;
• створіть посилання, доступні для асистивних технологій: кожен тег <a> повинен містити зрозумілий і розбірливий текст. Слід уникати порожніх посилань чи посилань, що складаються лише з зображень без alt-тексту. Якщо посилання прив’язане до зображення, необхідно вказати змістовний alt-текст, видимий або прихований текст посилання чи атрибут aria-label;
• додавайте цільові посилання для зображень: додавайте посилання лише на ті зображення, на які можна клікнути. Намагайтеся не додавати посилання на декоративні зображення, оскільки це може створювати зайвий шум для користувачів скринрідерів;
• виберіть потрібну мову: додайте атрибут lang до елемента <html> та безпосередньо до його дочірніх елементів <body>. Таке дублювання необхідне, оскільки деякі поштовики можуть видалити цей атрибут з елемента <html>. За можливості використовуйте правильний код мови; якщо мова невідома, в якості фолбека використовуйте lang="und";
• обгорніть контент у тег <body>, вказавши атрибут dir для визначення напрямку.

Крок 6. Перевірка відповідності листів стандартам доступності HTML-листів

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

Майк Пачелло,

Chief Accessibility Officer @ AudioEye | засновник, VP, Director, автор, ментор.

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

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

Використовуйте комбінацію методів тестування:

1. Автоматична перевірка доступності: використовуйте інструменти доступності для перевірки листів на наявність поширених проблем, як-от відсутність alt-тексту, відсутність атрибутів мови, некоректна структура, низька контрастність кольорів, а також проблеми з кодом, які можуть вплинути на роботу асистивних технологій.
2. Тестування скринрідерів: відкрийте лист за допомогою скринрідера, як-от VoiceOver, NVDA, Narrator чи TalkBack. Перевірте, чи є логічним черговість читання, чи чітко озвучуються зображення та посилання, чи допомагають заголовки в навігації та чи зрозумілий заклик до дії без візуального контексту.
3. Тестування клавіатурної навігації: керуйте листом без використання миші. Перевірте, чи доступні посилання, кнопки та інтерактивні елементи, чи зручні вони у використанні та чи розташовані вони в логічному порядку.
4. Ручний аналіз: прочитайте лист так, як це зробив би підписник. Переконайтеся, що текст зрозумілий, розділи легко переглядаються, посилання мають описові назви, зображення супроводжуються змістовним чи порожнім alt-текстом (коли це доречно), а основна дія є чіткою. Для оцінки таких параметрів, як контрастність кольорів, використовуйте спеціальні інструменти, а не покладайтеся на візуальну оцінку. 

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

Вам також може сподобатися

Крок 7. Перевірка чекліста з доступності перед надсиланням

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

У цьому посібнику ми розглянули рекомендації з доступності, що стосуються тексту листів, дизайну, коду, посилань, зображень та тестування. Щоб спростити підсумкову перевірку, ми об’єднали найважливіші пункти в один зручний чекліст. Ви можете скористатися ним перед запуском email-кампанії або впровадити його як етап внутрішнього контролю якості для своєї команди.

1. Структура та код

Переконайтеся, що структура ваших листів зрозуміла для скринрідерів та інших асистивних технологій:

• вкажіть правильний атрибут lang у тегу <html> та, за потреби, у ключових контейнерах контенту, оскільки деякі поштовики можуть видаляти атрибути з кореневого елемента;
• вкажіть атрибут dir у тегах <html> і <body>, щоб асистивні технології могли відображати текст у правильній послідовності читання;
• за можливості уникайте використання таблиць для розмітки. Якщо таблиця розмітки є потрібною, додайте атрибут role="presentation" чи role="none" до елемента <table>;
• використовуйте теги заголовків від <h1> до <h6>, щоб відобразити ієрархію контенту і допомогти отримувачам орієнтуватися в листі;
• обгорніть кожен значущий блок тексту тегом <p>, щоб створити чітку структуру читання;
• використовуйте елементи списку, як-от <ul>, <ol> і <li>, замість маркерів чи емодзі, що мають лише візуальне значення;
• додавайте змістовний alt-текст до інформаційних зображень і використовуйте порожній alt="" для декоративних картинок;
• додавайте посилання лише там, де вони допомагають отримувачу орієнтуватися. Не робіть посилання на декоративні зображення;
• переконайтеся, що кожне посилання має чіткий розпізнаваний текст. Не залишайте посилання порожніми і не покладайтеся лише на зображення, якщо воно не має змістовного alt-тексту чи іншого доступного позначення. 

2. Контент і зміст

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

• напишіть змістовний alt-текст, який точно описує суть зображення. Довжина тексту не повинна перевищувати 100-120 символів;
• використовуйте текст CTA, який повідомляє користувачам, що відбудеться далі, замість розпливчастих фраз на кшталт «Клікніть тут»;
• робіть речення короткими, чіткими та зрозумілими;
• розбивайте контент на розділи зі змістовними заголовками;
• надавайте транскрипти для аудіо, титри або субтитри для відео, а також змістовний описовий alt-текст для GIF-ок;
• не покладайтеся лише на колір для донесення змісту. Додавайте текстові мітки, іконки чи інші орієнтири.

3. Візуальне оформлення та зручність читання

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

• використовуйте коефіцієнт контрастності не менше 4,5:1 для звичайного тексту і 3:1 для великого тексту;
• перевіряйте палітру кольорів за допомогою симуляторів кольорової сліпоти;
• уникайте миготливого або швидкозмінного контенту. Обмежте частоту миготіння трьома повтореннями на секунду та використовуйте не більше одного анімованого елемента на екрані, включно з GIF-ками;
• уникайте довгих уривків, набраних курсивом, великими літерами, чи підкресленого тексту, який не є посиланням;
• використовуйте доступні сімейства шрифтів, як-от Arial, Verdana, Tahoma, Trebuchet, Calibri, Open Sans або OpenDyslexic;
• WCAG не встановлює мінімальний розмір шрифту. Однак для хорошої читабельності намагайтеся дотримуватися розміру не менше 14 пікселів на десктопах і 16 пікселів на мобільних пристроях;
• використовуйте міжрядковий інтервал близько 1,5 для основного тексту;
• використовуйте однотонний фон за текстом. Уникайте візерунків чи зображень за текстом;
• зробіть кнопки помітними та достатньо великими, щоб їх було зручно торкатися, в ідеалі не менше 44 × 44 пікселів;
• зробіть посилання візуально помітними, не покладаючись лише на колір. Підкреслення часто є найзрозумілішим варіантом;
• вирівнюйте основний текст відповідно до напрямку читання мови: зліва для мов, що читаються зліва направо, і справа для мов, що читаються справа наліво. Уникайте центрування основного тексту та вирівнювання за шириною;
• розгляньте можливість використання більш м'яких колірних комбінацій, як-от темно-сірий текст на не зовсім білому фоні, оскільки для деяких читачів вони можуть бути більш комфортними, ніж контрастний чорний колір на яскраво-білому фоні.

Крок 8. Забезпечення доступності листів протягом тривалого часу

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

Щоб забезпечити доступність листів, зробіть це частиною вашого звичайного робочого процесу:

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

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

Вам також може сподобатися

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

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

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

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

FAQ

1. Чи впливає доступність листів на їхню доставлюваність?

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

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

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

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

Вам також може сподобатися

2. Як перевірити доступність листів без використання скринрідера?

Наполегливо рекомендуємо провести тестування за допомогою скринрідера, оскільки це дозволяє побачити, як реальні підписники сприйматимуть лист. Вбудовані скринрідери доступні на більшості пристроїв, наприклад, VoiceOver на пристроях Apple, Narrator у Windows і TalkBack на Android.

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

Перед надсиланням можна також перевірити доступність у Stripo. Система перевіряє як технічні, так і візуальні аспекти доступності, зокрема структуру коду, alt-текст, текст посилань, мовні налаштування, контрастність кольорів і багато іншого.

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

Вам також може сподобатися

3. Яким вимогам WCAG має відповідати мій лист?

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

У стандарті WCAG 2.2 визначено три рівні відповідності: A, AA та AAA. Рівень A охоплює мінімальні вимоги до доступності, тоді як рівень AA є практичною метою для більшості команд, оскільки він враховує ширший спектр потреб одержувачів і є реалістичним для повсякденного створення листів.

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

Інструмент перевірки доступності від Stripo розроблено з метою допомогти командам перед надсиланням перевірити, чи відповідають їхні листи стандартам доступності, заснованим на WCAG 2.2 Level AA, та чи дотримуються більш суворі рекомендації з доступності листів.

4. Чи потрібні мені доступні листи, якщо я надсилаю їх лише своїм співробітникам?

Так. Внутрішні листи також мають бути доступними. Навіть якщо правові ризики можуть відрізнятися від ризиків, пов’язаних із зовнішніми email-кампаніями, доступність все одно є важливою для забезпечення комфорту співробітників, інклюзивності та рівного доступу до важливої інформації:

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

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

Вам також може сподобатися

5. Чи вважаються текстові листи доступними?

Не зовсім. Листи у форматі простого тексту дозволяють уникнути деяких поширених проблем із доступністю листів, характерних для HTML-листів, як-от зламана структура розмітки, проблеми з зображеннями (наприклад відсутність alt-тексту) або неякісно зверстані елементи. 

Однак у простого тексту є свої обмеження:

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