Что такое skip link — невидимая ссылка, без которой Tab жмут 40 раз
Открой любую страницу на GOV.UK, щёлкни по адресной строке и нажми Tab. В левом верхнем углу появится ссылка «Skip to main content». Секунду назад её не было.
Её не забыли спрятать — её спрятали нарочно. Это ссылка для тех, кто ходит по сайту клавиатурой. Британская дизайн-система требует её на всех страницах GOV.UK.
Зачем? W3C приводит пример: без такой ссылки человеку с клавиатурой приходится пройти Tab'ом около 40 ссылок, прежде чем он доберётся до основного текста. На каждой странице. При каждом переходе.
Что такое skip link
Skip link — ссылка «Перейти к содержимому». Она стоит в самом начале страницы и ведёт на её основную часть. Обычно она спрятана и появляется, только когда на неё встаёт фокус клавиатуры.
Мышкой ею никто не пользуется: взглядом ты и так мгновенно находишь, где начинается статья. А клавиатура ходит строго по порядку — логотип, пункты меню, поиск, корзина, переключатель языка. Всё это стоит перед контентом и повторяется на каждой странице.
Skip link — короткая тропинка мимо всей этой очереди. Один Enter — и ты уже в тексте.
Кому она нужна
Первое, что приходит в голову, — незрячим. Но тут неожиданность.
У скринридера есть свои быстрые переходы: по заголовкам и по областям страницы. Человек со скринридером обычно и без skip link прыгнет прямо к основному блоку.
А вот у зрячего человека с клавиатурой таких переходов нет. WebAIM, одна из главных организаций по веб-доступности, пишет прямо: спрятанная насовсем или крошечная ссылка не поможет именно тем, кому она нужнее всего, — зрячим пользователям клавиатуры.
Кто это:
- люди с нарушениями моторики. Кто-то нажимает клавиши палочкой во рту или управляет компьютером кнопкой-переключателем. Каждое лишнее нажатие — настоящее усилие;
- люди со сломанной рукой или с тремором, которым мышь неудобна;
- те, кто просто привык работать с клавиатуры.
Каждому из них skip link экономит десятки нажатий на каждой странице.
В стандарте доступности WCAG это критерий 2.4.1 «Обход блоков». Его уровень — A, самый базовый.
Как сделать skip link
Работает на любом сайте — хоть на чистом HTML, хоть на React: это обычная ссылка. Нужны три вещи: ссылка первой в <body>, id у основного блока и CSS, который прячет ссылку до фокуса.
<body>
<a class="skip-link" href="#main">Перейти к содержимому</a>
<header>…логотип, меню, поиск…</header>
<main id="main">
<h1>Заголовок страницы</h1>
</main>
</body>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 16px;
top: 16px;
padding: 12px 16px;
background: #fff;
color: #000;
}
Ссылка уезжает далеко за левый край экрана, но остаётся в очереди Tab. Получила фокус — выезжает на видное место.
Три ошибки, которые встречаются чаще всего:
- Спрятать через
display: noneили атрибутhidden. Так ссылка пропадает и из очереди Tab. Выглядит аккуратно, не работает ни у кого. - Поставить её не первой. Если перед ней меню или логотип-ссылка, смысл теряется. GOV.UK делает одно исключение: баннер про cookies идёт первым, а skip link — сразу после него.
- Промахнуться с
id. В ссылкеhref="#main", а у блокаid="content". Enter нажимается, ничего не происходит.
И ещё одно правило от GOV.UK: не заворачивай skip link в <nav> и не прячь её внутрь шапки.
Какой текст написать. WebAIM разбирает варианты — «Пропустить навигацию», «Пропустить меню», «Перейти к содержимому» — и советует последний. Он говорит, куда ты попадёшь, а не что пропускаешь. Человеку это понятнее.
Сделай её заметной. Если листать Tab'ом быстро, ссылка мелькнёт на долю секунды. Поэтому пусть она будет крупной и контрастной, а не серым текстом в углу. WebAIM даже предлагает плавную анимацию, чтобы ссылка задерживалась на экране чуть дольше.
Как проверить за десять секунд
- Открой страницу и щёлкни по адресной строке.
- Нажми Tab один раз. Первой должна появиться ссылка «Перейти к содержимому» — видимая и контрастная.
- Нажми Enter.
- Нажми Tab ещё раз. Фокус должен встать на первую ссылку или кнопку внутри контента, а не на пункт меню.
- Повтори на внутренней странице. Ссылка должна жить в общем шаблоне сайта, а не только на главной. В React или Next.js её место — в корневом layout, рядом с шапкой.
Прошло — готово. Добавь эту проверку в свой чеклист перед публикацией: она занимает меньше минуты, а находит дыру, которую мышкой не заметить никогда.
Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.
Нужна ли skip link, если на странице есть <main> и заголовки?
По WCAG этого может хватить: стандарт засчитывает и такие способы. Но они выручают в основном тех, у кого скринридер. Зрячему человеку с клавиатурой всё равно нужна именно ссылка.
Сколько skip link делать на одной странице?
Обычно одной достаточно. WebAIM предупреждает: если таких ссылок много, они сами превращаются в очередь, которую надо проходить.
Нужна ли она на лендинге?
Если перед контентом всего пара ссылок — можно обойтись. Но на лендинге с меню из пяти-шести пунктов она уже экономит нажатия, а стоит десяток строк кода.
Читайте дальше
Что такое git worktree — и зачем держать вторую папку с тем же проектом
Что такое состояние — и почему кнопка не «становится» серой
Что такое регрессия — и почему починенный баг возвращается
Что такое зависимость — и почему одна библиотека тянет двести
Что такое переменная — и почему копия списка меняется вместе с оригиналом
