Přeskakovací odkazy v praxi

autor:

Proč přeskakovat bloky

Typická webová stránka obsahuje bloky, které se opakují – záhlaví, navigaci, vyhledávání, prostory pro reklamu. Vidoucí uživatel, který ovládá web myší (nebo dotykem), nemá problém tyto bloky přeskočit nebo ignorovat. Problém mají uživatelé, kteří ovládají web klávesnicí nebo jiným způsobem, který prochází stránku odkaz po odkazu. Proto WCAG kritérium 2.4.1 vyžaduje, aby i tito uživatelé mohli určité bloky přeskočit a dostali se snadno na hlavní obsah.

Jak na přeskakovací odkazy

Nejčastější způsob, jak zajistit přeskočení bloků, jsou tzv. přeskakovací odkazy:

  • Jsou vždy hned na začátku stránky jako první elemet v tagu <body>.
  • 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.
  • Využívají ID jednotlivých bloků.
  • Vždy by mělo být možné přeskočit na hlavní obsah, podle charakteru stránek je možné přidat i další bloky. Není to ale náhrada navigace, méně znamená více.

HTML

...
<body>
    <a href="#search" class="skip-link">Přeskoč na vyhledávání</a>
    <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

Pokud není odkaz aktivní, je mimo viditelnou obrazovku. Pokud získá focus (např. tabulátorem klávesnice), tak se zobrazí.

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