Реализация навигации с клавиатуры для сайта (WCAG)

На проекте с интернет-магазином на 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, которые проверяем.

Типичные проблемы и их решения

Чаще всего клиенты приходят с такими проблемами: пользователи не могут заполнить формы, потому что фокус пропадает после ввода; модальные окна захватывают фокус, но не отдают обратно; кастомные дропдауны не открываются с клавиатуры. Решение каждой проблемы требует детального аудита и последующего рефакторинга.

Как мы реализуем: один кейс развёрнуто

Недавно наш клиент, интернет-магазин на 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 корректно объявлял меню.

Базовые клавиши навигации

Чек-лист типичных ошибок

Процесс работы

1. Аналитика — аудит текущей реализации, составление отчёта.
2. Проектирование — определение паттернов для каждого компонента.
3. Реализация — правки стилей, JS, ARIA.
4. Тестирование — unit-тесты, интеграционные тесты, ручная проверка.
5. Деплой — сдача документации и поддержка.

Что входит в работу

В результате вы получаете:

• Аудит с подробным отчётом по критериям WCAG 2.1.
• Исправленные компоненты с правильным tabindex и ARIA.
• Документация по реализованным keyboard pattern.
• Интеграционные тесты на Cypress.
• Инструкция для разработчиков по поддержке доступности.

Сроки реализации

• Аудит клавиатурной навигации: 1 день.
• Исправление нативных элементов и стилей фокуса: 1–2 дня.
• Кастомные компоненты (дропдауны, модалки, слайдеры): 3–5 дней.
• Тестирование и доработки: 1–2 дня.

Стоимость рассчитывается индивидуально, но в среднем аудит обходится в сумму, сопоставимую с одним днём работы разработчика. Закажите аудит клавиатурной навигации — получите консультацию бесплатно. Свяжитесь с нами, чтобы обсудить детали вашего проекта.