Čo je Skip Links?
Skip links sú skryté odkazy na začiatku webstránky, ktoré umožňujú používateľom klávesnice a screen readerov preskočiť opakujúce sa bloky obsahu a prejsť priamo na hlavný obsah stránky.
Definícia Skip Links
Čo sú skip links
Skip links (preskočovacie odkazy) sú špeciálne navigačné prvky umiestnené na samom začiatku HTML dokumentu. Sú štandardne skryté a zobrazia sa až pri navigácii klávesnicou (po stlačení Tab). Ich úlohou je umožniť používateľom preskočiť opakujúce sa bloky ako hlavná navigácia, hlavička alebo bočný panel.
Podľa kritéria WCAG 2.4.1 „Bypass Blocks" musí každá webstránka poskytovať mechanizmus na preskočenie opakujúcich sa blokov obsahu. Skip links sú najjednoduchším a najrozšírenejším riešením.
Implementácia skip links
- Umiestnenie — úplne na začiatku
<body>, pred navigáciou - Cieľ — odkaz smeruje na
#main-contentalebo podobné ID hlavného obsahu - Viditeľnosť — skryté vizuálne, ale dostupné pre screen readery a zobrazené pri fokuse
- Štýlovanie — pri fokuse sa odkaz zobrazí viditeľne, zvyčajne v hornej časti stránky
Prečo sú skip links dôležité
Bez skip links musí používateľ klávesnice na každej stránke pretabiť cez desiatky odkazov v navigácii, kým sa dostane k hlavnému obsahu. Na webe s 30 položkami v menu to znamená 30 stlačení Tab na každej podstránke. Skip links tento problém eliminujú jedným kliknutím.
Praktický príklad
Príklad: Firemný web s rozsiahlou navigáciou (25 položiek v menu).
Používateľ so zrakovým postihnutím otvorí stránku a stlačí Tab. Prvý fokusovaný prvok je skip link s textom „Preskočiť na hlavný obsah". Po stlačení Enter sa fokus presunie na element s id="main-content" a používateľ okamžite počuje hlavný obsah stránky.
Často kladené otázky
Čo sú skip links?
Skip links sú skryté odkazy na začiatku stránky, ktoré umožňujú používateľom klávesnice a screen readerov preskočiť opakujúce sa bloky (navigácia, hlavička) a prejsť priamo na hlavný obsah.
Sú skip links povinné?
Podľa WCAG 2.4.1 „Bypass Blocks" musí webstránka poskytnúť mechanizmus na preskočenie opakujúcich sa blokov. Skip links sú najjednoduchším spôsobom, ako túto požiadavku splniť.
Ako implementovať skip link?
Umiestnite odkaz na začiatok body elementu, smerujúci na ID hlavného obsahu. Vizuálne ho skryte pomocou CSS a zobrazujte iba pri fokuse (napríklad pomocou triedy sr-only s focus:not-sr-only).
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.