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

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

Навигация с клавиатуры — требование WCAG 2.1 (Success Criterion 2.1.1): все функции сайта должны быть доступны с клавиатуры без мыши. Это критично для пользователей с нарушениями моторики, screen reader-пользователей, и профессионалов, предпочитающих клавиатуру.

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

Видимость фокуса

WCAG SC 2.4.7 требует видимого индикатора фокуса. outline: none без замены — нарушение.

/* Не делать */
*:focus {
    outline: none;
}

/* Хороший кастомный стиль фокуса */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Для интерактивных элементов */
.btn:focus-visible {
    outline: 3px solid #0066CC;
    box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2);
}

/* Скрыть только при клике мышью, оставить при Tab */
:focus:not(:focus-visible) {
    outline: none;
}

Порядок фокуса (tabindex)

Естественный DOM-порядок должен соответствовать визуальному порядку. Нежелательно манипулировать tabindex с положительными значениями.

<!-- Хорошо: DOM-порядок совпадает с визуальным -->
<button tabindex="0">Кнопка 1</button>
<button tabindex="0">Кнопка 2</button>

<!-- Плохо: положительные tabindex создают путаницу -->
<button tabindex="3">Кнопка 1</button>
<button tabindex="1">Кнопка 2</button>

<!-- tabindex="-1": элемент получает фокус программно, но не через Tab -->
<div id="modal" tabindex="-1" role="dialog">...</div>

Кастомные компоненты

Нативные <button>, <a>, <input> работают с клавиатурой автоматически. Кастомные компоненты нужно делать доступными явно:

// Кастомная кнопка — должна работать как <button>
function CustomButton({ onClick, children, disabled }) {
    const handleKeyDown = (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick?.();
        }
    };

    return (
        <div
            role="button"
            tabIndex={disabled ? -1 : 0}
            onClick={onClick}
            onKeyDown={handleKeyDown}
            aria-disabled={disabled}
        >
            {children}
        </div>
    );
}

// Лучше — использовать нативный <button>
function BetterButton({ onClick, children, disabled }) {
    return (
        <button onClick={onClick} disabled={disabled}>
            {children}
        </button>
    );
}

Выпадающее меню (keyboard pattern)

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>
    );
}

Фокус-ловушка для модальных окон

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>
    );
}

Тестирование

// Cypress — проверка доступности с клавиатуры
it('navigates menu with keyboard', () => {
    cy.get('[data-testid="nav-trigger"]').focus().type('{enter}');
    cy.get('[data-testid="nav-menu"]').should('be.visible');
    cy.focused().type('{downarrow}');
    cy.get('[data-testid="nav-item-0"]').should('be.focused');
    cy.focused().type('{esc}');
    cy.get('[data-testid="nav-trigger"]').should('be.focused');
});

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

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