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

Реалізація навігації з клавіатури (WCAG)

Навігація з клавіатури — вимога WCAG 2.1 (Success Criterion 2.1.1): усі функції сайту мають бути доступні з клавіатури без мишки. Це критично для користувачів з рухомими порушеннями, користувачів екранних читалок та професіоналів, які віддають перевагу клавіатурній навігації.

Базові клавіші навігації

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

WCAG SC 2.4.7 вимагає видимого індикатора фокуса. Видалення outline без замінення — це порушення.

/* Не робити так */
*: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>
    );
}

Меню Dropdown (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 дні
• Спеціальні компоненти (dropdowns, модалі, слайдери): 3–5 днів