Покладіть мишу. Відкрийте свій сайт і спробуйте дійти до кнопки «Купити» чи форми контакту, натискаючи лише Tab. Якщо десь фокус зник, застряг або стрибнув угору сторінки, ви щойно побачили сайт так, як його бачать люди з руховими порушеннями, користувачі скрінрідерів і перемикачів. Автоматичні перевірки цього не покажуть, тому клавіатурний тест треба робити вручну. Він займає 15 хвилин.
У цьому пості 12 перевірок, які я проходжу на кожному аудиті. До кожної дано критерії WCAG 2.2, що саме має відбуватися і що змінити в розмітці. Далі я зніму відео, де пройду ці кроки на живому сайті.
Чому це важливо
Клавіатурою користуються не лише люди, які не можуть тримати мишу. Це користувачі скрінрідерів, голосового керування й перемикачів, люди з травмою зап'ястя, а ще ті, хто просто швидше працює без миші. Критерій WCAG 2.1.1 вимагає, щоб усе, що можна зробити мишею, можна було зробити й клавіатурою. Для сайтів, що працюють з ринком ЄС, це частина вимог European Accessibility Act, який діє з 28 червня 2025 року.
Підготовка
- Тестуйте опублікований сайт, а не прев'ю. Кеш, скрипти й CDN можуть змінити поведінку.
- Масштаб 100%, звичайна ширина вікна, потім ще раз у вузькому вікні (мобільне меню працює інакше).
- Увімкніть показ натиснутих клавіш: Carnac на Windows, KeyCastr на Mac. Це знадобиться й для відео.
- У Safari на Mac Tab за замовчуванням пропускає частину елементів. Натискайте Option+Tab або ввімкніть «Усі елементи керування» в налаштуваннях.
- Ведіть журнал: сторінка, елемент, що не так, який критерій.
Клавіші, які треба знати
| Клавіша | Що робить |
|---|---|
| Tab / Shift+Tab | Наступний / попередній інтерактивний елемент |
| Enter | Відкриває посилання, натискає кнопку |
| Space | Натискає кнопку, ставить позначку в чекбоксі. На посиланні лише прокручує сторінку |
| ← → ↑ ↓ | Вибір у групі радіокнопок, у списках, вкладках, повзунках |
| Esc | Закриває меню, діалог, підказки |
| Alt+← | Назад у історії браузера |
12 перевірок
1. Перший Tab показує «Перейти до вмісту»
Відкрийте сторінку, клацніть в адресний рядок і натисніть Tab. Першим має з'явитися видиме посилання на пропуск шапки (WCAG 2.4.1). Enter на ньому має перенести фокус на вміст, а не лише прокрутити сторінку. Наступний Tab має потрапити на перший елемент основного вмісту.
1<a class="skip-link" href="#main">Перейти до вмісту</a>
2…
3<main id="main" tabindex="-1">…</main>Не ховайте посилання через display: none: воно тоді взагалі не отримає фокус. Дозволено показувати його лише при фокусі.
2. Фокус видно скрізь
Пройдіть Tab-ом усю сторінку. На кожному елементі має бути помітна рамка (2.4.7), її контраст із фоном щонайменше 3:1 (1.4.11), і її не має закривати липка шапка чи банер cookies (2.4.11). Якщо в стилях є outline: none, поруч має бути заміна.
Робіть фокус через outline, а не box-shadow: у режимі високої контрастності Windows браузер прибирає тіні, і фокус зникає.
3. Порядок фокуса збігається з порядком читання
Пройдіть сторінку вперед і назад Shift+Tab. Фокус має рухатися так, як читає око: зверху вниз, зліва направо (2.4.3, 1.3.2). Порядок задає порядок у DOM. Додатний tabindex і перестановка через CSS order майже завжди ламають його.
4. Посилання веде, кнопка діє
Розкривне підменю в шапці часто робиться з одного елемента, який водночас веде на сторінку розділу і відкриває меню. З клавіатури так не працює. Зробіть два елементи: посилання на розділ і кнопку поруч.
1<a href="/desserts">Десерти</a>
2<button aria-expanded="false" aria-controls="desserts-menu">
3 Десерти: показати категорії
4</button>Скрінрідер оголосить «згорнуто» або «розгорнуто» (4.1.2). Появу фокуса на елементі не повинна відкривати нічого (3.2.1).
5. Esc закриває і повертає фокус
Відкрийте підменю, перейдіть усередину і натисніть Esc. Меню має закритися, а фокус повернутися на кнопку, яка його відкрила. Якщо фокус потрапляє на body, людина втрачає місце на сторінці й починає з початку. Для вкладених шарів Esc закриває лише верхній (2.1.2, 1.4.13).
6. Пошук із підказками
Пошук із випадним списком підказок будують за патерном ARIA combobox: role="combobox", aria-expanded, aria-controls на список і aria-activedescendant для підсвіченого пункту. Фокус лишається в полі, тож можна дописувати текст. Кількість підказок озвучує окремий aria-live="polite" (4.1.2, 4.1.3).
7. Чекбокси, радіокнопки й оцінка зірками
Справжній <input type="checkbox"> з <label> ставить позначку пробілом, і працює клік по всьому підпису. Група радіокнопок займає одну зупинку Tab, а вибір роблять стрілки. Це дають нативні елементи без жодного JavaScript, тому оцінку зірками теж робіть на радіокнопках у <fieldset> з <legend> (1.3.1, 2.1.1).
8. Модальне вікно
Відкрийте діалог. Фокус має одразу потрапити всередину, Tab ходить по колу вікна, сторінка під ним недоступна, Esc закриває, а фокус повертається на елемент, що відкрив вікно (2.1.2, 2.4.3). Найпростіший шлях це нативний <dialog>:
1dialog.showModal(); // фон неактивний, Esc закриває, Tab тримається всерединіФокус на мить виходить у панель браузера і повертається. Це задумана поведінка, а не помилка.
9. Перетягування має кнопкову альтернативу
Будь-який список, який змінюють перетягуванням, потребує альтернативи в одне натискання (2.5.7, новий у WCAG 2.2). Кнопки «Вище: Броколі» і «Нижче: Броколі» мають називати свій продукт, інакше в списку буде десяток однакових «Вище». Після переміщення фокус лишається на кнопці, а новий номер озвучує живий регіон.
10. Форми й помилки
Надішліть форму порожньою. Фокус має перейти на перше поле з помилкою, поле отримує aria-invalid="true", а текст помилки називає поле й допустиме значення, наприклад «Вік, років: 18–80», а не просто «Помилка» (3.3.1, 3.3.3). Групи полів збирайте у <fieldset>, для імені й пошти додайте autocomplete.
11. Прокручувані області
Широка таблиця чи графік у контейнері з overflow на вузькому екрані прокручується вбік мишею чи пальцем. Без елемента всередині, на який можна стати Tab-ом, клавіатурний користувач не дістанеться правої частини (2.1.1, 1.4.10). Лікування:
1<div role="region" aria-labelledby="table-title" tabindex="0" class="scroll">
2 <table>…</table>
3</div>12. Масштаб 400% і висока контрастність
Натискайте Ctrl і «+» до 400%. На ширині 1280px це відповідає 320px: сторінка не має прокручуватися вбік, а меню має згортатися в кнопку (1.4.4, 1.4.10). Для цього шрифти задають у rem, а не в px. Потім увімкніть контрастну тему Windows (лівий Alt + лівий Shift + Print Screen) і ще раз пройдіть сторінку Tab-ом: фокус має лишатися видимим (1.4.11). Анімацію загортайте в prefers-reduced-motion (2.3.3).
Чекліст
- Перший Tab показує пропуск блоків, Enter переносить фокус на вміст.
- Фокус видно на всьому, він заданий через outline.
- Порядок Tab збігається з порядком читання, додатного tabindex немає.
- Посилання веде, кнопка діє, один елемент не робить обох.
- Кнопка з іконкою має назву: «Прибрати: Картопля», а не «×».
- Розкривачки мають aria-expanded, перемикачі мають aria-pressed.
- Esc закриває верхній шар, фокус повертається на елемент-відкривач.
- Модальні вікна зроблені на <dialog>.
- Результат дії озвучує живий регіон, але не кожне натискання клавіші.
- Помилка у формі переносить фокус на поле, є aria-invalid і зрозумілий текст.
- Кожне перетягування має кнопкову альтернативу.
- Таблиця, що прокручується, лежить в названій області з tabindex="0".
- При 400% немає прокрутки вбік.
Чого цей тест не покаже
Клавіатурний тест не замінює перевірки зі скрінрідером: NVDA чи VoiceOver можуть озвучити роль і стан інакше, ніж ви очікуєте. Він також нічого не каже про сайт іншими мовами. Тому я проходжу і клавіатуру, і скрінрідер окремо.
Що далі
Спробуйте пройти свій сайт за цим списком. Якщо знайшли кілька проблем і не знаєте, з чого почати, на сторінці «Аудит» можна замовити перевірку з пріоритизованим планом виправлень.