WCAG 2.4.1 Přeskočení bloků

Kritérium úspěšnosti 2.4.1 ušetří uživatelům klávesnice a čteček obrazovky procházení stejného záhlaví, menu a propagační lišty na každé stránce, než se dostanou k obsahu. V e-shopu s velkým mega menu to může znamenat desítky stisků klávesy Tab na stránku. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.4.1). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Je k dispozici mechanismus pro přeskočení bloků obsahu, které se opakují na více webových stránkách.

WCAG nepředepisuje jednu techniku. Mezi dostatečné techniky, které uvádí W3C, patří:

• odkaz v horní části stránky, který přeskočí na hlavní obsah („Přeskočit na hlavní obsah“);
• odkaz na začátku opakovaného bloku, který přeskočí na jeho konec;
• orientační body ARIA (<header>, <nav>, <main>, <footer> nebo odpovídající role) k označení oblastí stránky;
• nadpisy na začátku každé sekce obsahu;
• rozbalovací a sbalovací menu.

V praxi odkaz pro přeskočení spolu se správným orientačním bodem <main> pokryje uživatele, kteří používají jen klávesnici (ti bez dalších nástrojů nemohou přeskakovat mezi orientačními body), i uživatele čteček obrazovky.

Typické chyby v e-shopu

• žádný odkaz pro přeskočení a před obsahem záhlaví s vyhledáváním, účtem, seznamem přání, košíkem, přepínačem měny a mega menu se 40 odkazy;
• odkaz pro přeskočení, který vede na neexistující kotvu nebo na prvek, který nemůže získat fokus;
• odkaz pro přeskočení, který zůstává neviditelný, i když má fokus;
• žádný orientační bod <main>, nebo celá stránka zabalená do elementů <div>;
• dlouhý postranní panel s filtry na stránkách kategorií bez možnosti přeskočit na produkty.

Jak to zkontrolovat

Automaticky: náš nástroj testuje, zda stránka nabízí alespoň jeden mechanismus pro přeskočení — odkaz pro přeskočení, orientační bod nebo nadpis (pravidlo bypass). Neumí posoudit, zda je odkaz při fokusu viditelný a vede na správné místo.

Ručně: načtěte stránku a jednou stiskněte Tab. Měl by se objevit odkaz „Přeskočit na obsah“. Stiskněte Enter a potom znovu Tab: fokus by měl dopadnout na začátek hlavního obsahu, ne zpátky do menu. Se čtečkou obrazovky si vypište orientační body a ověřte, že existuje právě jedna oblast main.

Jak to opravit

• Přidejte odkaz pro přeskočení jako první prvek rozvržení šablony, který může získat fokus, a nasměrujte ho na <main id="main-content">.
• Zajistěte, aby cíl mohl získat fokus (v případě potřeby přidejte tabindex="-1"), aby se fokus skutečně přesunul.
• Odkaz pro přeskočení při fokusu zobrazte s dobrým kontrastem.
• Používejte sémantické orientační body: <header>, <nav>, <main>, <footer>.
• Každou sekci obsahu začněte skutečným nadpisem.

Související kritéria

• 2.4.3 Pořadí fokusu — odkaz pro přeskočení by měl být v pořadí fokusu první.
• 2.4.6 Nadpisy a popisky — nadpisy musí sekci popisovat.
• 2.4.7 Viditelný fokus — odkaz pro přeskočení musí být při fokusu viditelný.

Časté otázky

Vyžaduje WCAG 2.4.1 odkaz pro přeskočení obsahu?

Striktně vzato ne. WCAG požaduje mechanismus pro přeskočení opakovaných bloků. Odkaz „Přeskočit na hlavní obsah“ je nejběžnější; dostatečnými technikami jsou také orientační body ARIA jako main a nav a nadpisy na začátku sekcí.

Může být odkaz pro přeskočení skrytý?

Může být vizuálně skrytý, dokud nezíská fokus klávesnice; potom se musí zobrazit. Odkaz, který zůstává neviditelný i při fokusu, mate vidící uživatele klávesnice.

Které bloky je třeba v e-shopu umožnit přeskočit?

Obsah opakovaný na mnoha stránkách: záhlaví, oznamovací lištu, hlavní navigaci a mega menu a někdy i dlouhé postranní panely s filtry před seznamem produktů.