Връзка за прескачане

Връзката за прескачане е клавишна комбинация в самото начало на всяка страница, която позволява на потребителите да прескочат повтарящата се навигация и да преминат директно към основното съдържание. Тя удовлетворява изискването на WCAG 2.4.1 Bypass Blocks (Ниво A) и е едно от най-евтините подобрения в достъпността, с които може да се постигне реален ефект.

Защо съществува

Представете си типичен сайт със съдържание. Заглавната част съдържа шест навигационни връзки от първо ниво, превключвател за език и превключвател на тема. Долният колонтитул разполага с още дванадесет. Всяка страница повтаря тези структури. Потребител, ползващ клавиатура или екранен четец, който попадне на дадена статия и иска да я прочете, трябва да натисне Tab приблизително тридесет пъти, преди да достигне тялото на статията. Умножено по всяка навигация между страниците, това е изтощително.

Връзката за прескачане е единична <a href="#main-content">Skip to content</a>, поставена като първия елемент с фокус в документа. Потребителят натиска Tab веднъж след зареждане на страницата, вижда „Прескочи към съдържанието”, натиска Enter и фокусът се премества в тялото на статията.

Имплементация

Шаблонът е компактен, но крие няколко добре известни капана:

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Три детайла, които имат значение:

1. Връзката трябва да е видима при фокус. Връзка за прескачане, която е постоянно display: none, е невидима за зрящите потребители на клавиатура, при което те не могат да разберат за съществуването й. Тя се скрива извън екрана чрез позициониране, а не чрез display: none или visibility: hidden.

2. Целевият елемент трябва да приема фокус. Обикновен <main> не получава клавиатурен фокус по подразбиране. Добавянето на tabindex="-1" го прави програмно фокусируем, така че браузърът действително премества фокуса при следване на връзката. Без това URL хешът се променя, но фокусът не се мести и следващото натискане на Tab рестартира от горната част на страницата — обезсмисляйки напълно функцията на връзката за прескачане.

3. Тя трябва да е първият фокусируем елемент. Не „сред първите 100 елемента” — буквално първият. Ако нещо я предшества (лого-връзка, икона за търсене), потребителят трябва да прескочи тези елементи, преди да достигне връзката за прескачане, което обезсмисля целта й.

Множество връзки за прескачане

Дълги страници с множество повтарящи се региони понякога се възползват от малко меню за прескачане вместо от единична връзка:

• Прескочи към основното съдържание
• Прескочи към навигацията
• Прескочи към долния колонтитул

Кратък списък с три или четири дестинации, видим при фокус, е приемлив. Дълго автоматично генерирано съдържание в началото на всяка страница — не.

Какво не замества

Връзката за прескачане е предпазна мрежа за заобикаляне на блокове. Тя не замества правилните ориентири (<nav>, <main>, <aside>, <footer>), правилната структура на заглавията (едно <h1> на страница, йерархични <h2>), нито ARIA aria-label върху дублиращи се ориентири. Потребителите на екранни четци се придвижват между региони и заглавия чрез клавишни комбинации, които зависят от наличието на тези структури; връзката за прескачане е предназначена за зрящи потребители, ползващи само клавиатура.