⚙️ Девлог Квітень 2026 ~8 хв читання

Девлог #13 — Перший аудит доступності: що ми знайшли та виправили

WebGL-симуляції та доступність традиційно погано поєднуються. Елементи canvas непрозорі для програм зчитування з екрана. Елементи керування недосяжні з клавіатури. Коефіцієнти контрастності не проходять WCAG AA. Ми нарешті провели повноцінний аудит — ось звіт про завдані збитки і що ми з цим зробили.

Чому ми зробили це саме зараз

Кілька вчителів написали нам, запитуючи, чи можна використовувати якісь із симуляцій на уроках зі слабозорими учнями. Чесна відповідь була: ми не знали. Цього було достатньо соромно, щоб мотивувати аудит. Ми використали Lighthouse, axe DevTools і ручні перевірки виключно клавіатурою на кожній сторінці сайту.

Підсумкові показники (до)

67
Lighthouse A11y (середнє)
18
Знайдено порушень axe
4
Критичних (WCAG A)
94
Lighthouse A11y (після)

Що ми знайшли

🔴Критично
Клавіатурна пастка в canvas-елементах симуляцій
Натискання Tab усередині симуляції перемикало фокус між внутрішніми DOM-елементами Three.js, ніколи не виходячи до елементів керування сторінкою. Користувачі, які покладаються на навігацію з клавіатури, застрягали.
Виправлення: додано tabindex="0" до обгортки canvas, а також обробник клавіші Escape, що знімає фокус із canvas і повертає його на сторінку.
🔴Критично
Відсутній <label> на всіх елементах керування
Кожна панель керування симуляції мала повзунки <input type="range"> без пов'язаної мітки — лише візуальний текст поруч. Програми зчитування з екрана оголошували «повзунок» без жодного контексту.
Виправлення: кожен повзунок обгорнуто в <label>, або додано атрибути aria-label та aria-describedby там, де мітку потрібно було винести окремо.
🔴Критично
Помилки контрастності кольорів (приглушений текст)
Наш токен --color-muted-2 (#7a88a0) на темному тлі (#060d1a) давав коефіцієнт контрастності 3.4:1 — нижче вимоги WCAG AA у 4.5:1 для звичайного тексту.
Виправлення: --color-muted-2 освітлено до #8fa5c0 (4.6:1). Аналогічно оновлено --color-muted.
🔴Критично
Відсутнє посилання «перейти до вмісту»
Кожна сторінка змушувала користувачів клавіатури проходити всю панель навігації, перш ніж дістатися елементів керування симуляцією. На сторінках із 12+ пунктами навігації це було непридатним для використання.
Виправлення: додано візуально приховане посилання «Перейти до основного вмісту» як перший елемент, що отримує фокус, на кожній сторінці — воно стає видимим при фокусуванні.
🟡Попередження
Canvas не має текстового опису
WebGL canvas-елементи повністю невидимі для програм зчитування з екрана. Користувач із VoiceOver потрапляв на симуляцію і не чув нічого корисного.
Виправлення: до кожного canvas додано role="img" та aria-label зі змістовним описом того, що показує симуляція, а також посилання на текстове пояснення.
🟡Попередження
Індикатор фокусу перекрито CSS-скидом
Наш глобальний скид outline: none прибрав кільце фокусу браузера з усіх інтерактивних елементів. Користувачі клавіатури не мали жодної візуальної вказівки, де перебуває фокус.
Виправлення: глобальний скид видалено, замінено правилом :focus-visible з 2px бурштиновим контуром із відступом на всіх інтерактивних елементах.

Найскладніша проблема: рухомі симуляції

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

Наш підхід полягав у тому, щоб відокремити інтерактивність від досвіду сприйняття:

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

Що ще залишається зробити

Девлог Доступність WCAG WebGL