За рік — 28 червня 2025 року — запрацює Директива ЄС 2019/882 про доступність товарів та послуг («Директива ЄС 2019/882»). Ця директива покликана зробити сайти продавців товарів зручнішими для людей з інвалідністю. Що це означає, на кого поширюватиметься її дія та що доведеться зробити, щоб виконати її вимоги — у колонці для AIN розповідає юрист Axon Partners Олександр Патюков.

Чи замислювались ви над тим, як, наприклад, незрячі люди користуються комп'ютерами? Звичайні комп’ютери не можуть перекласти те, що є на екрані, шрифтом Брайля, але можуть його озвучити, а тому такі люди сприймають інформацію на слух. Однак що робити, якщо незряча людина потрапить не на текстовий чи звуковий контент, а, наприклад, на зображення чи графік? Як машина має зачитати їй, що там розміщене?

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

Рішення всіх цих проблем відоме давно — доступність. У кожній сфері є зведення рекомендацій, кращих практик, а іноді обов’язкових до виконання вимог, як зробити щось доступним. Наприклад, у сфері будівництва цим зведенням є Стандарт ДБН В.2.2-40:2018 «Інклюзивність будівель та споруд», а для інтернету таким зведенням є WCAG — «Настанови з доступності вебвмісту». У 2023 році WCAG переклали українською мовою, але ми радимо користуватися мовою оригіналу, оскільки вона набагато свіжіша та часто оновлюється.

Перші стандарти доступності вебвмісту з’явилися у 1999 році і відтоді багато разів оновлювались і доповнювались. Але весь цей час ці стандарти не були обов’язковими, тому їх дотримувались далеко не всі. У 2019 році Європарламент і Рада ЄС ухвалили Директиву ЄС 2019/882, відповідно до якої з 28 червня 2025 року дотримуватися цих вимог зобов’яжуть виробників, імпортерів і дистриб’юторів деяких категорій товарів і постачальників деяких видів послуг.

Товари, на які поширюються вимоги Директиви ЄС 2019/882, досить нішеві: це комп’ютери загального призначення та деякі пристрої спеціального призначення, як-от банкомати, паркомати, кіоски самообслуговування, електронні книжки.

А ось із послугами ситуація інша: вимоги Директиви ЄС 2019/882 поширюються на послуги електронної комерції (зокрема, на сайти інтернет-магазинів), а також на послуги електронних комунікацій, аудіовізуальні медіа, споживчий банкінг, сайти пасажирських транспортних компаній і на програми для читання електронних книжок.

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

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

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

Придатність до сприйняття

Контент буде придатним до сприйняття (англ. perceivable), якщо всі користувачі зможуть його сприйняти таким чином, яким вони можуть його сприйняти. Щоб виконати цей критерій, потрібно, щоб:

  • кожен нетекстовий матеріал мав текстову альтернативу.

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


Джерело: Soggy Cat Enjoyer


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

  • до чутливого до часу контенту надавалася альтернатива.

«Чутливим до часу» розробники WCAG назвали аудіо- та відеоконтент. Текст ви можете читати в тому ритмі, в якому вам зручно, а ось з аудіо та відео ситуація дещо інша. Стандарт вимагає, щоб для такого контенту надавалася нечутлива до часу альтернатива. Наприклад, стенограма чи субтитри.

  • контент був адаптивним.

Кожен сайт, який ви бачите в інтернеті (зокрема і той, на якому ви зараз читаєте цю статтю), ви бачите таким, який він є, тому що хтось (або верстальник, або програма) описали кожен його елемент на гіпертекстовій мові розмітки — HTML.

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

Мова розмітки HTML має певний набір елементів: кнопки, поля для вводу, чекбокси, текстові блоки, картинки… Але ці три технології разом також дозволяють описати майже будь-який елемент як будь-який інший. Кнопки, описані як посилання, поля для вводу  як абзаци тексту, зображення, описані як посилання. Розробники часто вдаються до таких хитрощів. Візуально такі елементи повністю функціональні, але для допоміжних технологій вони абсолютно недоступні.

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

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

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

  • контент був розбірливий.

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

Функціональність

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

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

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

  • сайт надає достатньо часу на реагування.

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

Стандарти WCAG передбачають лише три винятки з цього правила: (1) його можна не дотримуватися, якщо елемент управління повинен змінюватися в режимі реального часу, (2) якщо можливість поставити його на паузу чи сповільнити відсутня, або (3) якщо час, на який контент з’являється, перевищує 20 годин.

  • сайт не провокує епілептичні напади.

Ніщо на сайті не має блимати частіше, ніж 3 рази на секунду.

  • забезпечено зручну навігацію сайтом.

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

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

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

Елемент інтерфейсу під назвою «хлібні крихти». Названий за мотивами німецької казки «Гензель і Гретель»: в ній головні герої не змогли знайти дорогу додому, тому що хлібні крихти, які вони залишали на своєму шляху, з’їли птахи. 

  • елементами вводу на сайті можна користуватися з різних пристроїв.

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

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

Якщо ви використовуєте drag-and-drop, то переконайтеся, що аналогічну дію (зазвичай це завантаження файлу) можна виконати й іншим шляхом, без перетягування файлу з одного вікна до іншого: тобто, дрег’н’дропу має надаватися альтернатива. Нею може бути, наприклад, кнопка для вибору файлу.

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

Зрозумілість

  • Контент має бути читабельний.

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


Дописали сюди мову сторінки — і вимога виконана.


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

Щоб виконати вимоги цього критерію на найвищий рівень доступності «ААА», потрібно пропрацювати зрозумілість тексту настільки, щоб його міг зрозуміти випускник 9 класу загальноосвітньої школи. Для цього потрібно надати пояснення до всіх незвичайних слів (жаргонізмів) та абревіатур; а якщо це можливо, то тексту потрібно надати альтернативу, написану простішими словами.

  • інтерфейс повинен працювати передбачувано.

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

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

На всіх сторінках вашого сайту має співпадати порядок елементів навігації.

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

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

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

  • допомагайте користувачам у вводі даних, якщо від них це вимагається.

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

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

Якщо від користувача кілька разів вимагається вводити одні і ті самі дані (наприклад, номер телефону при кожному замовленні), ви повинні за замовчуванням підставляти у відповідні поля ті дані, які ви вже маєте.

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

  • надати можливість виправити дані після їх надсилання, або

  • перевірити дані автоматично та надати можливість користувачу виправити знайдені помилки, або

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

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

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

Надійність

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

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

Що ще, крім дотримання стандартів WCAG, доведеться зробити?

Директива вимагає від надавачів послуг, на які вона поширюється, не лише дотримуватися WCAG, але також:

  • надати своїм користувачам опис послуг, що ним надаються, загалом;

  • повідомити користувачів про те, як саме його послуга виконує вимоги доступності;

  • самостійно повідомляти уповноважені органи своєї держави про порушення вимог доступності та про заходи, вжиті для їх усунення;

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

Додаток 1 до Директиви ЄС 2019/882 також містить особливі вимоги, які висуваються до окремих видів послуг, на які поширюється її дія. Наприклад, від надавачів послуг електронної комерції вимагається використовувати лише такі методи ідентифікації й оплати, що відповідають стандартам WCAG; від надавачів послуг споживчого банкінгу вимагають викладати інформацію про послуги так, щоб її зрозуміли люди з рівнем володіння відповідною мовою B2; а від аудіовізуальних медіа вимагається супроводжувати весь аудіоконтент субтитрами, що синхронізовані з відеорядом і які користувач може налаштовувати самостійно.

Чи обов’язково дотримуватися цих стандартів в Україні?

Україна постійно імплементує у своє законодавство директиви ЄС. Це означає, що вони стають частиною її законодавства навіть незважаючи на те що сама держава поки що не є членом ЄС.

Зараз дотримання стандартів WCAG є обов’язковим для сайтів органів виконавчої влади, але Кабінет Міністрів України навесні 2023 року запланував розробити законопроєкт, який би вніс положення директиви в українське законодавство. Тому є всі підстави вважати, що рано чи пізно такий закон внесуть до Парламенту та ухвалять, і, крім органів влади, вимоги доступності почнуть поширюватись і на приватних осіб.

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

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

Тому, коли робите сайти, зважайте на вимоги доступності, оскільки і в користувачів буде кращий досвід, і себе вбережете від штрафів в ЄС.