Skip linky a navigace klávesnicí

00:00:00

Co je navigace klávesnicí a proč na ní záleží?

Ne každý ovládá počítač myší. Lidé s motorickým postižením používají klávesnici, speciální spínače nebo jiná vstupní zařízení. Nevidomí uživatelé pracují výhradně s klávesnicí a odečítačem obrazovky. A i běžný uživatel občas sáhne po klávesnici místo myši – například při vyplňování formuláře.

Správně napsaná webová stránka musí být plně ovladatelná klávesnicí – bez myši, bez dotykové obrazovky, bez výjimek. Každý odkaz, každé tlačítko, každé formulářové pole musí být dostupné stiskem klávesy Tab.

Jak funguje navigace klávesou Tab?

Klávesa Tab přesouvá fokus (zaměření) z jednoho interaktivního prvku na další – postupně prochází všechny odkazy, tlačítka a formulářová pole na stránce. Kombinace Shift + Tab se pohybuje pozpátku.

Aktivní prvek (ten, na kterém právě fokus leží) je vizuálně označen – obvykle rámečkem nebo zvýrazněním. Toto označení se nazývá focus indicator a nikdy by nemělo být v CSS skryto. Bez něj se vidoucí uživatel používající klávesnici ztratí – neví, kde na stránce se nachází.

Interaktivní prvky, které fokus přijímají automaticky:

  • Odkazy – <a href="...">
  • Tlačítka – <button>
  • Formulářová pole – <input>, <select>, <textarea>

Běžné tagy jako <div> nebo <p> fokus nepřijímají. Pokud z nich uděláš interaktivní prvek, musíš přidat atribut tabindex="0".

Atribut tabindex

Atribut tabindex ovlivňuje, zda a v jakém pořadí prvek přijímá fokus klávesou Tab. Má tři důležité hodnoty:

  • tabindex="0" – prvek je zařazen do přirozeného pořadí fookusu podle struktury HTML. Používej tehdy, když chceš, aby byl prvek dostupný klávesnicí, ale nechceš měnit pořadí.
  • tabindex="-1" – prvek není dostupný klávesou Tab, ale lze na něj fokus přesunout programově přes JavaScript. Typické použití: modální okna nebo skip link cíle.
  • tabindex="1" a vyšší – mění přirozené pořadí fookusu. Nepoužívej to. Ruční číslování pořadí je křehké, těžko udržovatelné a matoucí pro uživatele. Vždy raději uprav pořadí prvků přímo v HTML.

Co je skip link?

Představ si, že každou stránku webu začínáš od začátku a musíš projít celé navigační menu – dvacet odkazů – než se dostaneš k samotnému obsahu. Pro uživatele klávesnice nebo odečítače obrazovky je to velmi únavné, zejména na stránkách, které navštěvují opakovaně.

Řešením je skip link – odkaz umístěný úplně na začátku stránky, který umožní přeskočit opakující se navigaci a přejít přímo na hlavní obsah. Uživatel, který si přeje, stiskne Enter a okamžitě se ocitne u článku – bez procházení menu.

Jak skip link napsat?

Skip link je obyčejný odkaz umístěný jako úplně první prvek uvnitř <body>. Odkazuje na id hlavního obsahu stránky:

<body>
			  <a href="#hlavni-obsah" class="skip-link">Skočit na hlavní obsah</a>
			  <header>...navigace...</header>
			  <main id="hlavni-obsah">
				<h1>Název stránky</h1>
				...
			  </main>
			</body>

Skip link bývá pro vidoucí uživatele vizuálně skrytý – zobrazí se teprve tehdy, když na něj přijde fokus klávesou Tab. To se řeší v CSS. Nesmí být ale skryt pomocí display: none nebo visibility: hidden – taková skrytí prvek zcela vyřadí z přístupu, i pro odečítač. Správné řešení je prvek vizuálně odsunout mimo viditelnou oblast a přivést ho zpět jen při fookusu:

.skip-link {
			  position: absolute;
			  left: -9999px;
			  top: auto;
			}
			.skip-link:focus {
			  left: 0;
			  top: 0;
			}

Na jedné stránce může být více skip linků – například „Skočit na hlavní obsah“ a „Skočit na vyhledávání“. Příliš mnoho jich ale ztrácí smysl. Dva až tři jsou optimum.

Jak VoiceOver naviguje stránkou?

VoiceOver nabízí více způsobů, jak se pohybovat po stránce – nejen klávesou Tab. Uživatel může přeskakovat přímo mezi:

  • nadpisy – klávesa H v režimu prohlížení
  • oblastmi stránky (landmarks) – <nav>, <main>, <header>, <footer>
  • odkazy
  • formulářovými prvky

To je přesný důvod, proč jsou sémantické tagy a správná struktura nadpisů tak důležité. Bez nich musí uživatel VoiceOveru číst stránku od začátku do konce – s nimi může okamžitě přeskočit na místo, které ho zajímá.

Jak otestovat přístupnost klávesnicí?

Test je jednoduchý a nevyžaduje žádné speciální nástroje. Odlož myš a zkus stránku ovládat pouze klávesnicí:

  • Stiskni Tab – přesunul se fokus na první interaktivní prvek? Je vidět, kde fokus leží?
  • Procházej dál klávesou Tab – dostaneš se na všechny odkazy a tlačítka?
  • Aktivuj odkaz nebo tlačítko klávesou Enter – funguje to?
  • Zkus skip link – po prvním stisku Tab se zobrazil? Po stisku Enter přeskočil fokus na hlavní obsah?
  • Nikde se fokus „nezasekl“ v místě, odkud se nelze dostat klávesou Tab?

Pokud na všechny otázky odpovíš ano, stránka základní test klávesnicové přístupnosti splňuje.

Tip od Zdeňka

Zdeněk radí: Skip link je první věc, co přidám na každou novou stránku – ještě dřív než napíšu samotný obsah. Je to drobnost, která zabere pět minut, ale uživatelům odečítače ušetří minuty každý den. A test klávesnicí si dělám pravidelně – odložím myš, zapnu VoiceOver a zkusím stránku používat normálně. Vždy najdu něco, co jsem přehlédl. Je to nejlepší způsob, jak si ověřit, že web skutečně funguje pro všechny.