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

На проекте с интернет-магазином на React 18 и Next.js 14 пользователи массово жаловались, что не могут добавить товар в корзину — клавиатурный фокус пропадал после выбора размера. Модальные окна блокировали выход. Такие баги не только ухудшают UX, но и создают риски судебных исков. Клавиатурная навигация — строгое требование WCAG 2.1 (Success Criterion 2.1.1). Мы, наша команда, помогаем внедрить её под ключ: аудит, исправление, тестирование и документация. Оценим проект за один рабочий день, сроки реализации — от 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 дня.

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