Доступність сайтів: WCAG, екранні читачі, навігація клавіатурою
На веб-сайті великого банку була кнопка «Подати заявку». Візуально вона виглядала як кнопка. У розмітці це був <div class="btn" onclick="...">. Екранний читач NVDA не оголошував її як інтерактивний елемент, Tab її пропускав, Enter не спрацьовував. Для 285 000 незрячих користувачів у Росії цей банк просто не існував як онлайн-сервіс.
Семантична розмітка: основа всього
Більшість проблем доступності вирішуються правильним HTML, а не додатковими ARIA-атрибутами. <button> замість <div onclick>, <nav> замість <div class="navigation">, <h1>–<h6> у правильній ієрархії, <label for="field-id"> замість <div class="label">.
ARIA потрібна там, де нативний HTML не справляється: кастомні компоненти — выпадаючі меню, спливаючі вікна, модальні вікна, вкладки, accordion. І ось тут починається складність.
Типова помилка в кастомних дропдаунах: відкривається список варіантів, екранний читач не знає, що це combobox, не оголошує кількість опцій, не говорить яка вибрана, фокус не переходить у список при відкритті. Правильна реалізація:
-
role="combobox"на інпуті -
aria-expanded="true/false"при відкритті/закритті -
aria-controls="listbox-id"вказує на список -
aria-activedescendant— ID поточного вибраного елемента -
role="option"іaria-selectedна кожному варіанті
Це не теорія, це те, що тестується екранним читачем. NVDA + Chrome або VoiceOver + Safari — обов'язкова частина QA.
Навігація клавіатурою
Порядок Tab має збігатися з візуальним порядком елементів. Якщо у HTML кнопка «Скасувати» стоїть перед «Підтвердити», але CSS їх міняє місцями — користувач клавіатури збентежений.
Focus trap у модальних вікнах. Коли модалка відкривається, Tab повинен циклюватися тільки всередині неї, не виходити за її межі. При закритті — повернення фокусу на елемент, що відкрив модалку. Без цього користувач клавіатури після закриття опиняється на початку сторінки.
tabindex="-1" — елемент не попадає у Tab-послідовність, але може отримати фокус програмно. Використовується для елементів, які отримують фокус через JavaScript (заголовки секцій, на які прокручуємося після навігації по якорям).
tabindex="1" та вище — майже завжди помилка. Явний порядок tabindex ломає природний порядок і створює непередбачувану поведінку. Управляйте порядком через DOM-порядок, не через tabindex.
Skip links — посилання «Перейти до контенту», приховане візуально, але видиме при Tab. Дозволяє користувачам екранних читачів пропустити повторяючуюся навігацію. position: absolute; left: -9999px при звичайному стані, position: static при :focus.
Колір та контраст
WCAG 2.1 AA вимагає контрасту 4.5:1 для звичайного тексту, 3:1 для крупного (18px+ або 14px+ bold). AAA вимагає 7:1 та 4.5:1.
Найчастіші порушення: сірий placeholder у інпутах (#999 на білому = 2.9:1), світло-сірий secondary текст, білий текст на пастельному фоні.
Колір не повинен бути єдиним індикатором: «обов'язкові поля виділені червоним» без зірочки або текстового вказання — порушення для людей з кольоросліпотою.
Інструменти перевірки: axe DevTools, WAVE, вбудований Accessibility Inspector у Chrome DevTools. axe-core інтегрується в Playwright-тести: автоматична перевірка сторінок на 80+ правил WCAG при кожному деплої.
Медіаконтент та динаміка
Зображення без alt — частий базовий провал. Але alt повинен бути змістовним: не alt="image_123.jpg", не alt="зображення", а опис контенту релевантний контексту. Декоративні зображення — alt="" (пустий, не відсутній атрибут).
Відео повинно мати субтитри. YouTube автосубтитри — не стандарт, вони помиляються. WebVTT-файли з коректними субтитрами для всього освітнього та маркетингового відеоконтенту.
Анімації — проблема для користувачів з вестибулярними розладами. @media (prefers-reduced-motion: reduce) — медіа-запит, що вимикає або сповільнює анімації для користувачів з такою настройкою в ОС. Parallax-ефекти, нескінченні анімації, scroll-based transitions повинні поважати це уподобання.
WCAG 2.2 та що змінилось
WCAG 2.2 став офіційним у жовтні 2023. Нові критерії включають:
- 2.5.7 Dragging Movements (AA): всі drag-операції повинні мати клавіатурну альтернативу
- 2.5.8 Target Size (AA): мінімальний розмір інтерактивного елемента 24x24px (не тільки touch)
- 3.2.6 Consistent Help (A): якщо є контакт/чат підтримки, його розташування повинно бути консистентним на всіх сторінках
- 3.3.7 Redundant Entry (A): не примушувати вводити одну інформацію двічі в одній сесії
Аудит та усунення порушень
Автоматичні інструменти знаходять близько 30–40% порушень WCAG. Решта — тільки ручне тестування. Мінімальний сценарій ручного тестування: пройти весь критичний user flow (реєстрація, покупка, форма заявки) тільки клавіатурою та зі екранним читачем.
Процес роботи
Аудит починається з автоматичного сканування (axe, Lighthouse), потім ручне тестування ключових сценаріїв. Формуємо пріоритизований список порушень: P1 (блокують використання), P2 (створюють складності), P3 (поліпшення). Виправлення йде ітераціями, вбудовуємо перевірки в CI щоб не накопичувати регресію.
Строки
Аудит сайту з звітом: 3–7 днів. Усунення порушень рівня A/AA на існуючому проекті: 3–8 тижнів залежно від обсягу та технічного боргу. Розробка нового проекту з дотриманням WCAG 2.2 AA: додає 15–25% до строків розробки.