Přeskakovací odkazy (skip link) v praxi

autor:

Na většině webových stránek se opakují bloky jako hlavička, menu, vyhledávání nebo reklamy. Uživatelé s myší nebo dotykem je snadno přeskočí. Ale ti, kdo používají klávesnici nebo jinou asistivní technologii, musí projít každý odkaz jeden po druhém.

description k dané stránceProto WCAG kritérium 2.4.1 vyžaduje, aby i tito uživatelé mohli některé bloky přeskočit a dostali se snadno na hlavní obsah.

  • Umístěte je hned na začátku stránky, jako úplně první prvek v těle stránky <body>.
  • Protože j hned na začátku stránky, screen readery ho přečtou jako jeden z prvních a uživatelé se k němu snadno dostanou klávesou Tab – rychle a bez zbytečného hledání.
  • Mohou být neviditelné a zobrazit se až při stisknutí tabelátoru. Jakmile odkaz získá zaměření (focus), stane se pro uživatele (nebo čtečky obrazovky) viditelným.
  • Standardně se zobrazují v levém horním rohu stránky. Musí být dobře viditelné a lehce nalezitelné, aby byly užitečné.
  • Využívají ID jednotlivých bloků.
  • Většinou stačí jeden odkaz „Přeskočit na hlavní obsah“. Podle charakteru stránek je možné přidat i další odkazy. Není to ale náhrada navigace, méně znamená více.

Formulace skip linku

Odkaz pro přeskočení lze formulovat několika běžnými způsoby:

  • Přeskočit navigaci
  • Přeskočit hlavní navigaci
  • Přeskočit/Přejít na hlavní obsah
  • Přeskočit/Přejít na obsah

Je lepší, když odkaz říká, kam uživatel půjde, než co přeskočí. Nejčastěji se používá:

  • „Přeskočit na hlavní obsah“
  • „Přeskočit na obsah“

HTML

Na začátek stránky (hned za <body>) přidejte odkaz:

...
<body>
    <a href="#main-content" class="skip-link">Přeskoč na hlavní obsah</a>

Hlavní obsah stránky označte vybraným identifikátorem main-content. Díky tomu se uživatel po kliknutí na odkaz přesune rovnou k hlavnímu obsahu.

<main id="main-content">
  ...
</main>

Celý kód pak může vypadat:

...
<body>
    <a href="#main-content" class="skip-link">Přeskoč na hlavní obsah</a>
    <header>
        ...
        <div id="search">...</div>
    </header>
    <main id="main-content">...</main>
    <footer>...</footer>
</body>

CSS

Většinou je odkaz pro přeskočení skrytý a zobrazí se až ve chvíli, kdy na něj uživatel přejde pomocí klávesnice (získá focus). Níže je příklad stylování:

Odkaz má třídu skip-link, takže ji můžeme skrýt. Pokud tedy odkaz není aktivní, je mimo viditelnou obrazovku (odkaz je daleko mimo vizuální oblast prohlížeče). 

.skip-link {
    position: absolute; 
    left: -10000px;
    width: 1px; 
    height: 1px; 
    overflow: hidden;
}

Velikost 1px a overflow: hidden; jsou určeny pro případ, kdy uživatel deaktivoval absolutní pozicování.

Když uživatel přejde na odkaz klávesou Tab (nebo jinak získá focus), musí se odkaz zobrazit. To zajistíme pomocí CSS:

.skip-link:focus, 
.skip-link:active { 
    left: 5px;
    top: 5px;
    width: auto;
    height: auto;
    overflow: visible;
    text-decoration: underline;
}

Nejčastější chyby:

  • Odkaz není funkční (chybí odpovídající ID ve stránce)
  • Odkaz není viditelný při zaměření (focus)
  • Přeskakovací odkaz neexistuje vůbec

Shrnutí

  • Proč přidat skip link? Uživatelé, kteří ovládají web jen klávesnicí, se díky němu dostanou rychleji k hlavnímu obsahu.
  • Jak ho přidat? Umístěte odkaz na začátek stránky. Použijte stylování, které ho skryje a při klávesovém výběru (focus) se zobrazí.
  • Jaký text odkazu zvolit? Nejlepší je „Přejít k hlavnímu obsahu“ (anglicky „Skip to main content“).
  • Kolik odkazů použít? Většinou stačí jeden. Více jich má smysl jen na složitějších stránkách.
  • Existují i jiné možnosti? Pomůže určitě i správná struktura stránky (např. značky <main>, <nav>), ale odkaz pro přeskočení zůstává nejspolehlivějším řešením.

Další materiály:

Potřebujete poradit?

Ozvěte se nám