Přístupné značení typů odkazů – Jak na přístupnost

Spravce 27.12.2022 – 10:38

Při procházení webových stránek můžeme narazit na hypertextové odkazy různého typu. Před navštívením určitých typů odkazů může být dobré vědět:

  • zda odkaz směřuje na soubor, například ve formátu PDF nebo DOCX;

  • zda se odkaz otevře na nové záložce nebo v novém okně.

Navíc nejen uživatelům odečítačů obrazovky nebo zvětšovacího softwaru nemusí být ani po aktivaci takových odkazů zřejmé, že se ocitli třeba v PDF dokumentu nebo v novém okně, v jehož případě mohou být zaskočeni, že není možné se vrátit zpět v historii webového prohlížeče. Proto na tento problém pomýšlí také Pokyny pro zpřístupnění webového obsahu WCAG (Web Content Accessibility Guidelines), jejichž kritérium úspěšnosti 3.2.5 – Change on Request uvádí, že změna kontextu, jakou je třeba právě otevření odkazu v novém okně, by se měla dít jen na základě požadavku uživatele, anebo že by měl existovat způsob, jak tyto změny kontextu vypnout.

Způsobem, jak umožnit informované rozhodnutí uživatele, zda odkaz navštívit nebo ne, a tedy i řešením problému s takto nepředvídatelnými odkazy, je doplnit každý patřičný odkaz o text nebo ikonku s alternativním textem indikující, že jde o odkaz na soubor určitého formátu, respektive odkaz, který se otevře v novém okně. O tomto řešení se zmiňují rovněž i techniky WCAG s označením G201 a H83, jež přispívají k naplnění výše zmíněného kritéria úspěšnosti WCAG 3.2.5.

Ideální řešení

Pokud chceme uživatele informovat o skutečnosti, že odkazujeme na soubor, nebo že se odkaz otevře v novém okně, tak nejlepším řešením je tuto informaci zmínit přímo v textu odkazu, např. <a href="#" target="_blank">Toto je odkaz (otevře se v novém okně)</a>.

Řešení s ikonkou

Z důvodu úspory místa nebo z hlediska designu může být žádoucí neuvádět informaci o typu odkazu jako součást textu odkazu, ale použít místo ní ikonku. V takovém případě je většinou jednodušší ikonku realizovat pomocí CSS vlastnosti background nastavené pro element <a>. Možné je rovněž použít element <img> umístěný za textem odkazu, avšak v takovém případě doporučujeme obrázek zcela skrýt před odečítači nastavením atributu alt na prázdnou hodnotu čili alt="". Ikonky však nemusí být srozumitelné všem uživatelům, především těm s kognitivním postižením, a je proto silně doporučena spíše textová informace uvnitř odkazu viditelná pro uživatele.

Nicméně zvolíte-li realizaci pomocí ikonky, tak je na místě zajistit, aby se k informaci o typu odkazu dostali i uživatelé odečítačů. Toho je nejlepší docílit použitím atributu aria-label, např. <a href="#" target="_blank" aria-label="Toto je odkaz (otevře se v novém okně)">Toto je odkaz</a>. Text atributu aria-label pro odečítače zcela nahradí text odkazu uvedený v obsahu elementu <a>.

Může se nabízet i řešení, kdy informaci o typu odkazu předáte uživatelům odečítačů prostřednictvím atributu aria-describedby nebo aria-description. Toto řešení ale nedoporučujeme, jelikož některé odečítače text zprostředkovaný těmito atributy při čtení stránky v režimu odečítače, tedy například při čtení stránky řádek po řádku, vůbec nepřečtou. Jiné odečítače ji přečtou jako první informaci před samotným textem odkazu, což může být velmi nepraktické.

Řešení textu s typem odkazu pomocí CSS

Na webových stránkách velkého rozsahu nebo na stránkách, kam vkládají texty s odkazy jiní uživatelé než tvůrce webu, může být náročné zajistit, aby všechny odkazy uvedených typů byly patřičně doplněny o informaci, že jde například o odkaz na soubor ve formátu PDF nebo že se odkaz otevře v novém okně. Popřípadě na takové popisování odkazů nemusí být myšleno už při tvorbě webu a potřeba tohoto popisování může vyvstat až později.

Existuje však elegantní a jednoduchý způsob, jak tyto odkazy dodatečně automaticky a hromadně opatřit příslušnými ikonkami, a především jak zajistit, že v případě uživatelů odečítačů obrazovky bude místo ikonky uživateli přečten alternativní popisek typu odkazu, přičemž tento textový popisek bude skryt před vidícími uživateli.

Poměrně značnou nevýhodou tohoto elegantního řešení však je, že jisté odečítače popisek s typem odkazu při čtení stránky řádek po řádku neohlásí dohromady s textem odkazu, ale tento popisek se přečte až po navigaci na další řádek, takže uživatel odečítače si ji nemusí před předčtením textu odkazu a jeho navštívením všimnout.

Dejme tomu, že ve složce, kde se nachází náš CSS soubor, máme uložené ikonky s názvy „pdf-icon.svg“ a „new-window-icon.svg“. V takovém případě CSS pravidlo, které zajistí automatické doplnění popisku „(PDF)“ ke všem odkazům končícím na řetězec „.pdf“ a dále CSS pravidlo doplňující popisek „(otevře se v novém okně)“ ke všem odkazům, jež obsahují atribut target="blank", čili k odkazům otevírajícím se v novém okně nebo na novém panelu, pak může vypadat následovně:

a[target="_blank"],
a[href$=".pdf"] {
    display: inline-block;
    padding-right: 1.2em;
    background-position: right center;
    background-repeat: no-repeat;
}

a[target="_blank"] {
background-image: url("new-window-icon.svg");
background-size: 1em 1em;
}

a[href$=".pdf"] {
background-image: url("pdf-icon.png");
background-size: 1em 1em;
}

a[target="_blank"]:after,
a[href$=".pdf"]:after {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}

a[target="_blank"]:after {
content: " (otevře se v novém okně)";
}

a[href$=".pdf"]:after {
content: " (PDF)";
}

Jaké odkazy otevírat v novém okně?

Souvisejícím problémem je otázka, jaké odkazy bychom jako tvůrci webu vlastně měli značit tak, aby se otevřely v novém okně. I na tento problém pomýšlí technika WCAG, konkrétně technika s označením G200, která obecně radí, abychom se pokud možno tlačítek nebo odkazů na stránky otevírající se v novém okně nebo na novém panelu spíše vyvarovali, ponechali tuto volbu raději na uživateli a dále uvádí výjimky, kdy je naopak odkazy vhodné v novém okně otevřít. Jde například o následující případy:

  • Na stránce s formulářem je uveden odkaz na stránku obsahující podrobnější nápovědu k formulářovým polím, který se otevře v novém okně, aby uživatel nepřišel o již vyplněná data nebo pozici ve formuláři.

  • Odkaz směřuje ze zabezpečené oblasti webu, do které je uživatel přihlášen, přičemž následování tohoto odkazu by znamenalo ukončení přihlášení. V tomto případě otevření takového odkazu v novém okně umožňuje procházení nezabezpečené oblasti webu a zároveň zachování přihlášení v okně předešlém.

Odkazy na externí weby

Samostatnou kategorií odkazů jsou dále odkazy, které míří na externí webové stránky čili na stránky nacházející se na jiné webové doméně. V případě takových odkazů bohužel nelze jednoduše vytvořit CSS pravidlo, pomocí něhož bychom veškeré externí odkazy automaticky doplnili o patřičný popisek, respektive ikonku.

Funkční ukázka

Zdrojový kód ke stažení

Zdrojový kód přístupného značení typů odkazů (ZIP, 5 kB).

Použité zdroje informací

Štítky

přístupnost
Jak na přístupnost