Реализация Skip Navigation для доступности сайта
Skip Navigation («Перейти к содержимому») — ссылка в начале страницы, позволяющая пользователям screen reader и клавиатурной навигации пропустить повторяющийся блок навигации и сразу перейти к основному содержимому. WCAG SC 2.4.1 (уровень A) — обязательное требование.
Базовая реализация
<!DOCTYPE html>
<html>
<head>
<style>
.skip-link {
position: absolute;
top: -100px;
left: 0;
padding: 8px 16px;
background: #000;
color: #fff;
font-weight: bold;
z-index: 9999;
text-decoration: none;
transition: top 0.1s;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body>
<!-- Первый элемент на странице -->
<a href="#main-content" class="skip-link">Перейти к содержимому</a>
<header>
<nav><!-- навигация --></nav>
</header>
<main id="main-content" tabindex="-1">
<!-- Основной контент -->
</main>
</body>
</html>
tabindex="-1" на <main> необходим — <main> не принимает фокус по умолчанию, а ссылка должна переносить фокус именно туда.
Несколько Skip-ссылок
На сложных страницах добавляют несколько ссылок:
<nav class="skip-links" aria-label="Быстрая навигация">
<a href="#main-content" class="skip-link">Перейти к содержимому</a>
<a href="#main-nav" class="skip-link">Перейти к навигации</a>
<a href="#search" class="skip-link">Перейти к поиску</a>
</nav>
React-компонент
function SkipNavigation() {
return (
<nav aria-label="Быстрая навигация">
<a
href="#main-content"
className="skip-nav-link"
>
Перейти к содержимому
</a>
</nav>
);
}
// В App.tsx
function App() {
return (
<>
<SkipNavigation />
<Header />
<main id="main-content" tabIndex={-1}>
<Routes />
</main>
<Footer />
</>
);
}
/* Tailwind */
.skip-nav-link {
@apply absolute -top-full left-0 z-50 px-4 py-2
bg-black text-white font-bold
focus:top-0 transition-all;
}
SPA: сброс фокуса при навигации
В SPA ссылка «Перейти к содержимому» работает один раз. При переходе между страницами нужно программно переносить фокус:
function usePageFocusReset() {
const location = useLocation();
const mainRef = useRef<HTMLElement>(null);
useEffect(() => {
mainRef.current?.focus();
// Опционально: скролл в начало
window.scrollTo(0, 0);
}, [location.pathname]);
return mainRef;
}
function Layout() {
const mainRef = usePageFocusReset();
return (
<>
<SkipNavigation />
<Header />
<main id="main-content" tabIndex={-1} ref={mainRef}>
<Outlet />
</main>
</>
);
}
Срок реализации
1–2 часа включая CSS-стили и тестирование с клавиатурой.