Індикатор фокусу не завжди помітний
Частина елементів отримує фокус без виразного контуру. Додайте контрастний стиль :focus-visible.
Клавіатурна доступність
Тестер фокус-рингу та клавіатурного сценарію
Практичний тестер клавіатурної доступності: перевіряйте видимість :focus-visible, порядок переходів Tab/Shift+Tab, роботу Escape і фокус-пастки в модальних вікнах. Отримуйте зрозумілий звіт перед релізом.
Контрольний список перевірки
Відмічайте пункти під час реального проходу інтерфейсу. Звіт нижче оновлюється миттєво.
Майданчик для клавіатурного тесту
Використайте Tab / Shift+Tab для переходів між елементами та відкрийте модальне вікно для перевірки пастки фокусу.
Цільовий блок після skip-link
Звіт доступності
Критичні помилки блокують клавіатурну навігацію. Попередження бажано виправити до релізу.
3Критичних
3Попереджень
0/6Пройдено перевірок
Порушений порядок переходів Tab
Клавіатурний сценарій не відповідає порядку читання. Перегляньте структуру фокусованих елементів і tabindex.
Фокус виходить за межі модального вікна
Користувач може перейти Tab на контент поза діалогом. Потрібна коректна фокус-пастка.
Відсутнє закриття через Escape
Діалог має закриватися клавішею Escape для очікуваної клавіатурної взаємодії.
Фокус не повертається після закриття
Після закриття діалогу поверніть фокус на кнопку, яка його відкрила.
Немає skip-link або він недоступний
Додайте посилання переходу до контенту, щоб пропускати повторювану навігацію.
Клавіатурна доступність: що перевіряти і як пройти аудит
Сторінка перевіряє ключові сценарії доступності без миші: видимий фокус, логічна Tab-навігація, замикання фокусу в діалозі та повернення фокусу на тригер після закриття. Саме тут найчастіше ламаються продакшн-інтерфейси.
Як користуватися: 1) пройдіть чекліст; 2) протестуйте інтерактивні елементи клавішами Tab/Shift+Tab; 3) відкрийте модалку і перевірте Escape та focus trap; 4) зафіксуйте втрати фокусу у звіті та виправте перед випуском.
Поширені запитання про фокус і клавіатуру
Що входить у базову перевірку клавіатурної доступності?
Мінімум: видимий :focus-visible, коректний порядок Tab, закриття модалки через Escape, фокус-пастка всередині діалогу та повернення фокусу на кнопку-тригер.
Навіщо потрібен окремий тест для модальних вікон?
Модалки часто ламають клавіатурний потік: фокус може втекти на фон або «загубитися». Окремий сценарій дозволяє швидко знайти такі помилки та виправити їх до релізу.
Чи достатньо лише візуально побачити фокус?
Ні. Потрібно перевіряти і видимість, і порядок переходів, і поведінку компонентів. Видимий фокус без правильного сценарію навігації не гарантує доступність.
Кому підходить цей звіт і як його застосувати?
Звіт підходить розробникам, QA, дизайнерам і аудиторам. Пункти можна переносити у тест-кейси, задачі в трекері та критерії приймання перед публікацією.