На проекте с интернет-магазином на 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 дня.
Стоимость рассчитывается индивидуально, но в среднем аудит обходится в сумму, сопоставимую с одним днём работы разработчика. Закажите аудит клавиатурной навигации — получите консультацию бесплатно. Свяжитесь с нами, чтобы обсудить детали вашего проекта.