Skip Links in Web Accessibility

Важливість Skip Links у веб-доступності

Більшість користувачів мережі (а також джуніор розробники) не знають про ці посилання - вони приховані візуально, але з'являються, наприклад, коли ви перейшовши на сторінку і першою дією натискаєте на клавіатурі таб. Вони також є найпершою частиною контенту на сторінці і тому зчитуються в першу чергу програмами читання з екрана. Якщо вам цікаво, спробуйте зайти на деякі сайти, які ви часто використовуєте, і натиснути Tab, як тільки ви туди потрапите. На багатьох популярних та відвідуваних сайтах ви побачите, як раніше приховане посилання з'являється і пропонує направити вас до унікального контенту.

Не всі взаємодіють з веб-сайтами однаково. Хоча більшість з нас може прокручувати меню за допомогою миші або трекпада, багато інших (наприклад, користувачів клавіатури або людей з обмеженими можливостями) повинні натискати Tab для кожного навігаційного посилання, перш ніж вони дістануться до головного контенту.

Зазвичай на сайтах є велика навігація або заголовок у верхній частині кожної сторінки, тому відсутність "посилання пропуску" до контенту може призвести до того, що сліпі користувачі скріндрідерів почують один і той же контент знову і знову, переходячи по вашому сайту, або доведеться пропускати елементи і вгадувати, де починається унікальний контент на сторінці. Дуже поширеним випадком є той, коли навігаційний елемент містить багато підменю та елементів, і користувач може довго чекати, поки скріндрідер прочитає їх всі вголос.

Давайте подивимося, як реалізовані посилання пропуску на деяких популярних сайтах:

Як Skip Links покращують UX

Посилання пропуску дозволяють користувачам з обмеженою мобільністю або тим, хто покладається на допоміжні технології, пропускати повторюваний контент, такий як навігаційні меню, і швидше отримувати доступ до головної частини сторінки. — WCAG 2.1 Критерій успіху 2.4.1¹

Користувачі клавіатури

Для користувачів, які навігують за допомогою клавіатури (часто використовуючи клавішу Tab), посилання пропуску надають важливий шляхок для пропуску заголовків, меню та інших повторюваних елементів. Це забезпечує можливість користувачам швидко дістатися до головного контенту без зайвої навігації, що покращує швидкість та ефективність їхнього перегляду.

Приклад: Веб-сайт з кількома навігаційними меню може бути втомлюючим для користувачів, які не можуть використовувати мишу. З посиланням пропуску вони можуть сконцентруватися на головному контенті після натискання Tab всього один раз.

Користувачі скріндрідерів

Скріндрідери, такі як JAWS або VoiceOver, читають вміст веб-сторінки лінійно. Посилання пропуску можуть бути важливим інструментом для користувачів цих пристроїв, дозволяючи їм обходити довгі навігаційні меню та заголовки, які інакше можуть уповільнити їх доступ до відповідної інформації.

Коли посилання пропуску реалізовано, скріндрідери оголосять його на початку сторінки, давши користувачам можливість відразу пропустити вперед або продовжити через меню.

Реалізація Skip Links в NextJS

Процес реалізації посилань пропуску в Next.js схожий на те, як це робиться в стандартному HTML/CSS, але з деякими ключовими особливостями React та компонентної архітектури.

1. Додавання skip link у компонент макету

У Next.js зазвичай є глобальний компонент макету (наприклад, _app.js або layout.js), який обгортає всі ваші сторінки. Це ідеальне місце для додавання посилання пропуску, яке можна використовувати на всьому сайті.

Ось базовий приклад того, як ви можете реалізувати посилання пропуску в макеті:

// components/Layout.js
export default function Layout({ children }) {
  return (
    <>
      <a href="#main-content" className="skip-link">
        Skip to main content
      </a>
 
      <header> {/* Your header code */} </header>
 
      <main id="main-content">{children}</main>
    </>
  );
}

2. Стилізація посилання пропуску

Для кращого UX skip link повинні бути приховані за дефолтом і з'являтися лише при (:focus-visible). Таким чином, вони не будуть втручатися в дизайн сайту, але будуть доступні, коли користувачі їх потребують.

Ось приклад того, як стилізувати посилання пропуску в global.css та Tailwind CSS:

/* global.css */
.skip-link {
  @apply z-50 absolute left-0 -top-12 focus-visible:top-0 bg-primary text-primary-foreground underline text-lg px-6 py-2;
}

Що почитати?

• A Deep Dive on Skipping to Content by Paul Ratcliffe
• Your skip links are broken by Hampus Sethfors
• Implement a Skip Link for Navigation-Heavy Sites by Ben Myers
• Skip Navigation Links by WebAIM

Примітки: