На проєкті з інтернет-магазином на React 18 і Next.js 14 користувачі масово скаржилися, що не можуть додати товар у кошик — клавіатурний фокус зникав після вибору розміру. Модальні вікна блокували вихід. Такі баги не лише погіршують UX, а й створюють ризики судових позовів. Клавіатурна навігація — сувора вимога WCAG 2.1 (Success Criterion 2.1.1). Ми, команда TrueTech, допомагаємо впровадити її під ключ: аудит, виправлення, тестування та документація. Оцінимо проєкт за один робочий день, терміни реалізації — від 5 днів. Понад 5 років досвіду у веб-доступності, десятки успішних проєктів. Наш підхід скорочує кількість скарг користувачів на 80% порівняно з сайтами без адаптованої навігації. За даними WebAIM, сайти з реалізованою клавіатурною навігацією мають на 30% вищу задоволеність користувачів.
Чому клавіатурна навігація критична для доступності?
Без неї сайт недоступний користувачам screen reader'ів, людям з тремором або тимчасовими обмеженнями (зламана миша). Google і Яндекс враховують доступність у ранжуванні. Реалізація за WCAG — внесок в UX та SEO одночасно.
Які інструменти допомагають тестувати клавіатурну навігацію?
Для автоматизації використовуємо Cypress з плагіном cypress-axe, а також ручну перевірку. Нижче — таблиця критеріїв WCAG, які перевіряємо.
| Критерій | Вимога | Приклад |
|---|---|---|
| SC 2.1.1 | Усі функції доступні з клавіатури | Кнопки, посилання, елементи форм |
| SC 2.1.2 | Фокус не застряє на одному елементі | Модальні вікна, кастомні меню |
| SC 2.4.3 | Порядок фокусу логічний | Tab-індекс відповідає візуальному |
| SC 2.4.7 | Фокус завжди видимий | Outline або кастомний стиль |
Типові проблеми та їх рішення
Найчастіше клієнти приходять з такими проблемами: користувачі не можуть заповнити форми, бо фокус зникає після вводу; модальні вікна захоплюють фокус, але не віддають його назад; кастомні дропдауни не відкриваються з клавіатури. Вирішення кожної проблеми потребує детального аудиту та подальшого рефакторингу.
Як ми реалізуємо: один кейс розгорнуто
Нещодавно наш клієнт, інтернет-магазин на React 18 з Next.js 14, зіткнувся з проблемами в модальному вікні кошика. Реалізували фокус-пастку з циклічним перемиканням та поверненням на кнопку після закриття. Заодно додали aria-modal="true" та обробку Escape.
function Modal({ isOpen, onClose, children }) {
const modalRef = useRef(null);
useEffect(() => {
if (!isOpen) return;
const focusableSelectors = [
'a[href]', 'button:not([disabled])', 'input:not([disabled])',
'textarea', 'select', '[tabindex]:not([tabindex="-1"])'
].join(', ');
const focusable = modalRef.current?.querySelectorAll(focusableSelectors);
const first = focusable?.[0];
const last = focusable?.[focusable.length - 1];
first?.focus();
const handleTab = (e) => {
if (e.key !== 'Tab') return;
if (e.shiftKey) {
if (document.activeElement === first) {
e.preventDefault();
last?.focus();
}
} else {
if (document.activeElement === last) {
e.preventDefault();
first?.focus();
}
}
};
const handleEsc = (e) => {
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', handleTab);
document.addEventListener('keydown', handleEsc);
return () => {
document.removeEventListener('keydown', handleTab);
document.removeEventListener('keydown', handleEsc);
};
}, [isOpen]);
if (!isOpen) return null;
return (
<div role="dialog" aria-modal="true" ref={modalRef}>
{children}
</div>
);
}
Такий підхід гарантує, що користувач не застряне в модалці.
Кастомні компоненти: дропдаун
function DropdownMenu({ trigger, items }) {
const [open, setOpen] = useState(false);
const [activeIndex, setActiveIndex] = useState(-1);
const itemRefs = useRef([]);
const handleKeyDown = (e) => {
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setActiveIndex(i => Math.min(i + 1, items.length - 1));
break;
case 'ArrowUp':
e.preventDefault();
setActiveIndex(i => Math.max(i - 1, 0));
break;
case 'Escape':
setOpen(false);
triggerRef.current?.focus();
break;
case 'Home':
setActiveIndex(0);
break;
case 'End':
setActiveIndex(items.length - 1);
break;
}
};
useEffect(() => {
if (activeIndex >= 0) {
itemRefs.current[activeIndex]?.focus();
}
}, [activeIndex]);
return (
<div>
<button
aria-haspopup="listbox"
aria-expanded={open}
onClick={() => setOpen(!open)}
>
{trigger}
</button>
{open && (
<ul role="listbox" onKeyDown={handleKeyDown}>
{items.map((item, i) => (
<li
key={item.id}
role="option"
tabIndex={-1}
ref={el => itemRefs.current[i] = el}
>
{item.label}
</li>
))}
</ul>
)}
</div>
);
}
Ми використовуємо aria-haspopup на MDN та role="listbox", щоб screen reader коректно оголошував меню.
Базові клавіші навігації
| Клавіша | Дія |
|---|---|
| Tab | Наступний фокусований елемент |
| Shift+Tab | Попередній фокусований елемент |
| Enter / Space | Активація кнопки, посилання, чекбокса |
| Стрілки | Навігація в радіогрупі, меню, слайдері |
| Esc | Закрити модальне вікно, дропдаун |
| Home / End | Перший / останній елемент списку |
Чек-лист типових помилок
Повний чек-лист аудиту клавіатурної навігації
- Перевірте, що всі інтерактивні елементи доступні з клавіатури.
- Переконайтеся, що фокус не застряє на якомусь елементі.
- Перевірте коректність порядку Tab.
- Переконайтеся, що індикатор фокусу видимий.
- Перевірте обробку Escape.
- Перевірте реакцію кастомних компонентів на стрілки та Enter.
- Переконайтеся, що outline не скинуто без заміни.
- Перевірте коректність ARIA-атрибутів.
Процес роботи
- Аналітика — аудит поточної реалізації, складання звіту.
- Проектування — визначення патернів для кожного компонента.
- Реалізація — правки стилів, JS, ARIA.
- Тестування — unit-тести, інтеграційні тести, ручна перевірка.
- Деплой — здача документації та підтримка.
Що входить у роботу
У результаті ви отримуєте:
- Аудит з детальним звітом за критеріями WCAG 2.1.
- Виправлені компоненти з правильним tabindex та ARIA.
- Документація за реалізованими keyboard pattern.
- Інтеграційні тести на Cypress.
- Інструкція для розробників щодо підтримки доступності.
Терміни реалізації
- Аудит клавіатурної навігації: 1 день.
- Виправлення нативних елементів та стилів фокусу: 1–2 дні.
- Кастомні компоненти (дропдауни, модалки, слайдери): 3–5 днів.
- Тестування та доопрацювання: 1–2 дні.
Вартість розраховується індивідуально, але в середньому аудит обходиться в суму, порівнянну з одним днем роботи розробника. Замовте аудит клавіатурної навігації — отримайте консультацію безкоштовно. Зв'яжіться з нами, щоб обговорити деталі вашого проєкту.