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

Кого це стосується насправді

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

• Сонце на екрані. Контраст 3:1, який виглядав стильно в темній кімнаті, на вулиці перетворюється на порожній прямокутник.
• Одна рука зайнята. Людина з дитиною на руках або в транспорті тицяє великим пальцем — і промахується по кнопці 20×20 пікселів.
• Звук вимкнено. Відео без субтитрів у стрічці не подивиться ніхто, хто зараз в офісі або в метро.
• Клавіатура замість миші. Це не лише люди з порушеннями моторики, а й будь-хто, хто заповнює форму з Tab, і будь-який автотест.
• Погана мережа й старий телефон. Якщо інтерфейс тримається виключно на JavaScript, при частковому завантаженні він просто не працює — про це детальніше в матеріалі про mobile-first підхід.

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

Контраст і колір: найдешевша перемога

Контраст — єдина частина доступності, яку можна виміряти числом і виправити за один день. Тому з неї варто починати. Правило коротке: 4.5:1 для звичайного тексту, 3:1 для великого (від 24px або від 19px жирним) і 3:1 для всього, що не текст, але несе сенс — іконок, меж полів, індикаторів фокуса.

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

Клавіатура, фокус і зони натискання

Просте випробування: відкрийте свій сайт, відкладіть мишу й спробуйте пройти шлях до оформлення замовлення самим лише Tab, Enter, Space та стрілками. Більшість сайтів ламаються на третьому кроці — зникає підсвітка фокуса, спливне вікно неможливо закрити, а випадне меню відкривається тільки при наведенні курсора.

/* Так робити не можна: фокус зникає в усіх, хто не користується мишею */
*:focus { outline: none; }

/* Так правильно: помітна рамка лише при навігації з клавіатури */
:focus-visible {
  outline: 3px solid #0097b2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Поважайте системне налаштування «зменшити рух» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

• Порядок обходу дорівнює візуальному порядку. Якщо блок пересунули через CSS, а в розмітці він залишився в кінці — фокус стрибатиме. tabindex з додатними значеннями не рятує, а погіршує: використовуйте лише 0 і -1.
• Посилання «Перейти до основного вмісту» першим елементом сторінки. На сайті з меню на 25 пунктів це економить користувачеві 25 натискань на кожній сторінці.
• Модальні вікна тримають фокус усередині й закриваються по Esc, а після закриття повертають фокус на кнопку, яка їх відкрила.
• Наведення курсора не може бути єдиним способом взаємодії. Меню, що розкривається лише по hover, на сенсорному екрані й з клавіатури недоступне взагалі.
• Зона натискання — від 24×24 пікселів за WCAG 2.2, а на практиці цільтеся у 44×44. Збільшити зону можна псевдоелементом, не роздуваючи саму іконку.

Семантика, alt-тексти й форми

Скрінрідер не бачить дизайн — він читає розмітку. Тому div зі слухачем кліку для нього не існує як кнопка: до нього не можна дійти клавіатурою, він не реагує на Enter і не має ролі. Це найпоширеніша структурна помилка, і виправляється вона одним тегом.

<!-- Не працює з клавіатури, не оголошується як кнопка -->
<div class="btn" onclick="submit()">Надіслати</div>

<!-- Працює одразу: фокус, Enter, Space, роль button -->
<button type="submit">Надіслати</button>

<!-- Кнопка без тексту потребує доступної назви -->
<button type="button" aria-label="Закрити вікно">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

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

Як перевіряти і чому віджети-накладки не працюють

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

1. 1

   Прохід лише з клавіатури

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

2. 2

   Автоматичний сканер

   Lighthouse або розширення axe DevTools: 10 хвилин на сторінку, знаходить контраст, порожні кнопки, дублікати id, порушення ієрархії заголовків.

3. 3

   Масштаб і вузький екран

   Збільште сторінку до 200% і окремо перевірте ширину 320 пікселів. Текст, що обрізається або вимагає горизонтальної прокрутки, — порушення, і водночас пряма шкода мобільній конверсії.

4. 4

   Швидка перевірка скрінрідером

   VoiceOver на macOS вмикається за Cmd+F5, NVDA на Windows безкоштовна. Прослухайте головну й одну сторінку послуги: заголовки, посилання, форму. Двадцять хвилин дають більше розуміння, ніж будь-який чекліст.

5. 5

   Регресія в підтримці

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

Часті питання про доступність сайтів

Коротко

• Цільтеся у WCAG 2.2 рівня AA: 4.5:1 для тексту, 3:1 для великого тексту й елементів інтерфейсу, зона натискання від 24 пікселів.
• Почніть із контрасту й :focus-visible — це один день роботи й найбільший ефект на вкладену годину.
• Використовуйте справжні button, label і заголовки за ієрархією. Більшість проблем доступності — це відсутня семантика, а не складні технології.
• Автоматичні сканери ловлять близько третини проблем. Прохід клавіатурою й двадцять хвилин зі скрінрідером знаходять решту.
• Віджети-накладки не роблять сайт доступним. Виправляйте розмітку, а не маскуйте її.