Реалізація Skip Navigation для доступності сайту
Skip Navigation («Перейти до вмісту») — посилання на початку сторінки, яке дозволяє користувачам екранних читалок та клавіатурної навігації пропустити повторювальний навігаційний блок і негайно перейти до основного вмісту. 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-стилі та тестування клавіатури.