Заобикаляне на блокове

Какво изисква критерият

Ако един и същ блок от съдържание се появява на множество страници — заглавна зона, основна навигация, мегаменю, лента с хлебни трохи, помощни връзки — потребителите с мишка го прескачат мигновено. Потребителите на клавиатура трябва да преминат с Tab през него всеки път. Потребителите на екранни четци трябва да го прослушват. Критерият изисква поне един механизъм, позволяващ прескачане директно към основното съдържание.

WCAG приема няколко механизма: връзка „Прескочи към основното съдържание”, правилни ориентирни региони (<header>, <nav>, <main>, <footer>) или реална йерархия на заглавия, по която потребителите на екранни четци могат да навигират с клавиша H. На практика връзката за прескачане в комбинация с ориентирни елементи е безопасната базова линия.

Как да се изпълни изискването

• Добавя се връзка „Прескочи към основното съдържание” като първия елемент с фокус на страницата. Тя трябва да е видима при фокус, а не постоянно скрита.
• Атрибутът href на връзката сочи към id на елемента <main>, а на <main> се добавя tabindex="-1", за да може Safari да позиционира фокуса там.
• Използват се реални ориентирни елементи: по един <header>, <nav> (или няколко с aria-label), <main> и <footer> на страница.
• Поддържа се чиста йерархия на заглавия, така че потребителите на JAWS и NVDA да могат да натискат H, 1, 2, 3 за прескачане.
• При наличие на множество повтарящи се блокове (помощна навигация + основна навигация + хлебни трохи) се обмисля добавяне на втора връзка за прескачане за най-проблемния от тях.

Чести грешки

• Връзката за прескачане е скрита с display: none вместо да е позиционирана извън екрана и показвана при фокус — помощните технологии не могат да я намерят.
• Целевият елемент на връзката за прескачане няма tabindex="-1", поради което Safari и WebKit игнорират прехода и фокусът остава върху самата връзка.
• Елементът <main> е вложен в <nav> или е дублиран няколко пъти на страницата.
• Йерархията на заглавията пропуска нива (h1 → h4) или ги използва единствено за визуално оразмеряване, нарушавайки стратегията за навигация с клавиша H.
• Фиксираните заглавни ленти припокриват фокусирания елемент след активиране на връзката за прескачане — вж. 2.4.11.

Защо е важно

Заобикалянето на блокове е най-евтиното подобрение на достъпността в списъка — връзката за прескачане изисква около 10 реда HTML и CSS — но процентът на неуспех в производствените сайтове все още е около 60% според годишното сканиране на WebAIM на милион сайта. За потребител, работещ само с клавиатура и навигиращ сайт с мегаменю от 40 елемента, преминаването с Tab през него при всяко зареждане на страница е изтощително и при продължителни сесии — ограничаващо.