(Не)доступні сайти державних органів України

Привіт! Ми, Тарас Скицький та Поліна Петрішина, UI/UX-дизайнери OpenTech — корпоративної благодійної програми, ініційованої нашими колегами з SoftServe.

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

Чому на українських державних сайтах створюють окремий режим з іконкою «ока» й чи робить він сайт насправді доступним

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

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

Створюючи доступний вебсайт, слід враховувати чотири ключові сфери інвалідності: зір, слух, рухливість і когнітивність.

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

В Україні вебдоступність регулюється стандартом ДСТУ EN 301 549:2022 «Інформаційні технології. Вимоги щодо доступності продуктів та послуг ІКТ» від 15 червня 2022 року. Його створили на базі однойменного європейського стандарту. Європейський стандарт своєю чергою побудований згідно з настановою з доступності вебконтенту WCAG (Web Content Accessibility Guidelines) версії 2.1, якою вже декілька років послуговувалося європейське законодавство. Настанови WCAG 2.1 перекладені українською мовою, щоб розробникам було простіше застосовувати їх на практиці.

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

У жовтні 2023 року Консорціум W3C (головна міжнародна організація, що розробляє й впроваджує технологічні стандарти для Всесвітнього павутиння) оновив настанови до версії WCAG 2.2, втім офіційного українського перекладу ще немає. Зміни в новій версії не є дуже суттєвими, це та ж сама версія 2.1, просто доповнена дев’ятьма новими критеріями успішності.

Щорічним дослідженням й оцінкою доступності вебсайтів в державному секторі України займається Програма розвитку ООН в Україні (ПРООН) та вже втретє публікує щорічний звіт за результатами моніторингу. Вони розробили власну методику моніторингу доступності державних сайтів. За допомогою автоматичного сканування вебсайтів й ручного тестування кожному сайту виставляють показник базової доступності. Мінімальне значення 0, максимум — 10 балів. Щороку вони аналізують на доступність 100 вебсайтів органів виконавчої влади центрального та місцевого рівнів.

В нашій статті ми будемо посилатись на їхній показник базової доступності вебсайту.

Ми проаналізували ті ж 100 вебсайтів, які використовувались для дослідження ПРООН, й виділили три основні підходи до розробки дизайну державних сайтів в Україні:

1. Сайти, які виглядають по-різному, з різноманітними власними дизайн підходами, які неможливо об’єднати за якимось принципом (52 сайти зі 100).
2. Сайти, зроблені за дизайн-системою державних сайтів України (27 сайтів зі 100).
3. Сайти зроблені в стилістиці Дії (21 сайт зі 100).

Різні за стилістикою та підходом

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

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

За іншими показниками доступності моніторинг ПРООН поставив 5/10 балів.

Сайт Кіровоградської обласної державної адміністрації

Версія сайту Кіровоградської обласної державної адміністрації для людей з проблемами зору

На сайті Міністерства Аграрної політики, який оновився буквально в грудні 2022 року, маємо ту ж проблему. Сама іконка ока, яка б мала вмикати режим кращого візуального сприйняття, є недоступною через малий розмір клікабельної зони, й також не має альтернативного тексту. Крім того, додалась проблема з контрастністю до фону — замість співвідношення 3:1, тут контраст практично у два рази менший, 1.8:1. Цікаво, чи думали розробники, що людина з поганим зором просто не побачить іконку й не зможе прочитати її скринридером?

Сайт Міністерства аграрної політики

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

Оцінка ПРООН — 3/10.

Чорно-біла версія сайту Міністерства аграрної політики

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

Оцінка ПРООН — 3/10.

Сайт Державної міграційної служби України

Версія для людей з вадами зору Державної міграційної служби України

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

Дизайн-система державних сайтів України

У 2018 році компанія KitSoft розробила дизайн-систему державних сайтів України. Вона вже морально застаріла, проте продовжує використовуватись для таких державних сайтів, як Верховна рада України, Кабінет міністрів, Міністерство економіки тощо.

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

Це все на папері, що ж на практиці?

Сайт дизайн-системи державних сайтів України

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

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

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

Оцінка ПРООН — 4/10.

Стандартна версія сайту Урядового порталу

Версія сайту Урядового порталу для людей з порушенням зору

На сайті Міністерства економіки спеціальний режим вже називається «Версія для слабозорих» й надає можливість налаштовувати додаткові схеми кольорів, наприклад, темно-синій шрифт на блакитному фоні. Але для чого робити таку версію сайту з контрастністю 7.75 : 1, якщо головна сторінка має елементи з більшою контрастністю 9.8 : 1?

Оцінка ПРООН — 7/10.

Стандартна версія сайту Міністерства економіки України

Версія сайту Міністерства економіки України для слабозорих зі стандартною схемою кольорів

Версія сайту Міністерства економіки України для слабозорих з синьою схемою кольорів

З 27 сайтів лише сторінка Верховної ради України не має спеціального режиму. Схоже, що про доступність головного законодавчого органу країни взагалі не думали, бо оцінка там 2/10.

Середня оцінка сайтів з цієї категорії — 3,88. Далеко не той показник, який очікуєш від таких важливих для країни цифрових сервісів.

Стилістика «Дії»

Її розробили у 2019 році, буквально за рік після дизайн-системи державних сайтів, Міністерство цифрової трансформації України, агенція Fedoriv та київське дизайн-бюро Spiilka. Одразу з нею запустили й портал онлайн-послуг «Дія», який згодом був відзначений нагородою Red Dot в категорії «Дизайн інтерфейсу».

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

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

Дизайн-система «Дія»

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

Оцінка ПРООН — 2/10.

Портал «Дія»

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

Оцінка ПРООН — 10/10.

Дія.Безбар’єрність

Приклад сайту, до якого були залучені ми як дизайнери програми OpenTech — це сайт Львівської обласної військової адміністрації.

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

В результаті сайт після запуску у 2022 році став лідером за результатами моніторингу ПРООН з оцінкою 7/10 балів. Цього року команда розробників доповнила пропущені вимоги, й сайт отримав оцінку 10/10.

Львівська обласна військова адміністрація

Хоча на сайтах у стилістиці «Дії» також не все так ідеально. Тут вже, звісно, немає можливості поміняти кольорову схему сайту, але трапляються несподіванки. На сайті Міністерство захисту довкілля та природних ресурсів України вирішили розмістити кнопку режиму «Людям з порушенням зору», яка взагалі не є клікабельною... А навіщо?

Оцінка згідно з результатами моніторингу ПРООН — 3/10.

Міністерство захисту довкілля та природних ресурсів України

Щодо назви кнопки спеціального режиму для доступної версії сайту, правильний підхід використано на сайті Міністерства цифрової трансформації України та «Дія.Освіта». Кнопка називається «Налаштування доступності». Щоправда, ці налаштування зводяться до увімкнення/вимкнення чорно-білого режиму й можливості збільшити шрифт.

Оцінка сайту Міністерства цифрової трансформації України за результатами моніторингу ПРООН — 6/10.

Версія сайту Міністерства цифрової трансформації України з включеними «Налаштуваннями доступності»

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

Оцінка сайту «Дія.Освіта» за результатами моніторингу ПРООН — 3/10.

Опції налаштування доступності сайту «Дія.Освіта»

Якщо підсумувати учасників цієї групи, то їхні результати виходять найкращим. Це й очевидно, бо всі ці сайти є найновішими (розроблялись після 2019 року), розробники та дизайнери більш свідомо підходили до доступності. Саме три сайти з цієї категорії (Вінницька обласна державна адміністрація, «Дія.Безбарʼєрність», Львівська обласна державна адміністрація) мають найвищі оцінки за моніторингом ПРООН — 10 балів. Середній результат цієї категорії — 5,95.

Іноземний підхід

Давайте ще поглянемо на сайти державних органів Євросоюзу, Великої Британії та США. Чи використовують вони спеціальний режим для покращення доступності сайтів? Відповідь — ні. Кнопки з «оком» й версії для слабозорих немає на жодному з сайтів парламентів чи президентів Євросоюзу. Всі ці сайти мають просто одну версію, яка враховує потреби доступності за законами кожної країни.

Ось приклади декількох з них:

Сайт Бундестагу Федеративної Республіки Німеччина

Офіційний сайт президента Франції

Сайт Риксдагу, парламенту Швеції

Сайт Фолькетінгу, парламенту Данії

Єдине, що ми помітили: на сайтах польського та латвійського сеймів, сайті президента Словаччини, Ірландії, Польщі й Хорватії є можливість змінювати розмір шрифтів й також увімкнення/вимкнення темної теми.

Сайт сейму Латвії

Сайт сейму Польщі

Офіційний сайт президента Словаччини

Офіційний сайт президента Ірландії

Офіційний сайт президента Польщі

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

Сайт Національної асамблеї Угорщини у звичайному режимі / Безбар’єрний варіант сайту Національної асамблеї Угорщини

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

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

Сайт державного сектору Великої Британії

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

Сайт Білого дому

Підсумки

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

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

Джерело зображення

Переваги й недоліки «особливого режиму»

Переваги

1. Надання більш контрастної або інверсивної версії сайту.
2. Можливість збільшувати/зменшувати розміри шрифту на сайті, але це ж можна швидше, легше й більш функціонально здійснити засобами будь-якого браузера (адже браузер підтримує збільшення сайтів до +500%, в той час, як на сайті переважно шрифт можна збільшити/зменшити на один крок).

Недоліки

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

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

Звідки ж виник цей спеціальний режим й чому він існує? Маємо підозру, що він бере свій початок ще у 2000 році з першої версії WCAG, де в критерії 11.4 сказано «Якщо ви не можете створити доступну сторінку, надайте посилання на альтернативну сторінку, яка використовує технології W3C, є доступною, містить еквівалентну інформацію (або функціональність) і оновлюється так само часто, як і недоступна (оригінальна) сторінка». На щастя, технології вже пішли вперед: в поточній версії WCAG такого пункту немає, адже й самі браузери й можливості верстки сторінок дозволяють створити одну версію сайту, яка буде повністю задовольняти вимоги доступності.

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