Odkazy pro přeskočení opakujícího se webového obsahu - Jak na přístupnost

Spravce 12.01.2023 – 15:23

Uživatelé procházející web výhradně pomocí klávesnice, nebo přesněji uživatelé nepoužívající myš či jiné polohovací zařízení, při sekvenční navigaci na webové stránce často narážejí na problém, jak snadno přeskočit opakující se obsah na začátku stránky, jako je její záhlaví nebo množství odkazů hlavní navigace, a jak se tedy dostat přímo na hlavní obsah, který uživatele přednostně zajímá. V tomto článku se zaměříme právě na řešení tohoto problému týkajícího se přístupnosti webových stránek.

Zmíněný problém není jen záležitostí vycházející z praxe, ale má oporu i v Pokynech pro zpřístupnění webového obsahu WCAG (Web Content Accessibility Guidelines),konkrétně v jejich kritériu úspěšnosti 2.4.1: Bypass Blocks. Řešením popsaného problému je tzv. „skip link“, čili odkaz na začátku stránky, který po aktivaci zavede uživatele bezprostředně na její hlavní obsah. I toto řešení je navrhováno a zdokumentováno webovou autoritou W3C a to prostřednictvím   techniky s označením G1, která naplňuje zmíněné kritérium úspěšnosti 2.4.1.

Zrakově postižení uživatelé odečítačů obrazovky na počítačích většinou už mají možnost snadno skákat po určitých strukturálních prvcích webové stránky jako jsou nadpisy nebo oblasti (známé také jako landmarky), což jim do jisté míry umožňuje přeskočit opakující se obsah stránky. Některé odečítače obrazovky pro počítače navíc disponují funkcionalitou umožňující navigaci přímo na hlavní oblast stránky. To vše nicméně jen za předpokladu, že jsou tyto oblasti v HTML kódu správně vyznačeny. Skip linky jsou však důležité především pro následující skupiny uživatelů:

  • Uživatele s motorickým postižením, kteří používají speciální asistivní zařízení umožňující ovládat klávesnici hlavou či různými zpřístupněnými přepínači. Při absenci skip linků jsou tito uživatelé odkázáni na zdlouhavé a náročné opakované navigování po odkazech a jiných aktivních prvcích tabulátorem, než se dostanou k hlavnímu obsahu.

  • Slabozrací uživatelé používající zvětšovače obrazovky, pro něž není snadné při zvětšeném obrazu vizuálně najít hlavní obsah stránky.

  • Uživatelé odečítačů na mobilních zařízeních, které typicky nedisponují jednoduchou možností skákání po oblastech stránky.

  • V HTML kódu by se měl nacházet na samotném začátku stránky tak, aby to byl první prvek, na který uživatel při navigaci pomocí klávesnice narazí.

  • Mělo by být možné jej zaměřit fokusem klávesnice.

  • Měl by být vizuálně skrytý do té doby, než je zaměřen fokusem klávesnice tak, aby ve výchozím stavu vizuálně nerušil nebo nemátl uživatele, kteří jej nepotřebují, ale aby byl zviditelněn především pro slabozraké uživatele nebo pro uživatele s motorickým postižením v momentě jeho potřeby. Toho lze dosáhnout použitím CSS pseudotřídy „:focus“. Navíc zviditelnění skip linku by ideálně nemělo být náhlé, aby vidící uživatele nezaskočilo nebo nemátlo. Pro jeho pozvolné zviditelnění je možné použít CSS animace.

  • Aktivace skip linku by měla přesunout fokus klávesnice na začátek hlavního obsahu stránky.

Zdrojový kód

Níže následuje ukázka a vysvětlení, jak je možné skip link naimplementovat pomocí HTML a CSS.

HTML

Skip link je možné v HTML vytvořit pomocí elementu <a>, který prostřednictvím atributu „href“ odkazuje do stejné stránky na její hlavní obsah. Hodnota atributu „href“ musí začínat znakem mřížky (#) a poté musí následovat hodnota atributu „id“elementu, na který chceme uživatele zavést tak, jak je ukázáno níže:

...

    <body>

      <a href="#main">Přeskočit na hlavní obsah</a>

      ...

      <main id="main" role="main">

        <h1>Hlavní nadpis</h1>

        <p>Zde se nachází hlavní obsah stránky, na nějž vede odkaz ze začátku stránky,

        a který uživatele přednostně zajímá.</p>

      </main>

    </body>

    ...

CSS

Skrytí skip linku dosáhneme pomocí CSS jeho odsunutím nahoru mimo viditelnou oblast webové stránky o potřebnou vzdálenost (v naší ukázce na pozici -60 pixelů absolutně od horního okraje nadřazeného elementu). Navíc pro zviditelnění skip linku v momentě jeho zaměření fokusem klávesnice můžeme použít animaci jeho vertikální pozice (konkrétně CSS vlastnosti „top“) tak, aby plynule pozvolna najel do viditelné oblasti shora a po přesunu fokusu na jiný prvek opět zajel mimo viditelnou oblast.

.skipLink {

    padding: 6px;

    position: absolute;

    top: -60px;

    left: 0px;

    -webkit-transition: top 1s ease-out;

    transition: top 1s ease-out;

    z-index: 100;

}



.skipLink:focus {

    top: 5px;

    -webkit-transition: top .1s ease-in;

    transition: top .1s ease-in;

}

Funkční ukázka

Zdrojový kód ke stažení

Použité a další zdroje informací

Autor: Adam Samec

Štítky

přístupnost
Jak na přístupnost