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 následující:

  • 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 i 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 ikonku, nebo v případě uživatelů odečítačů o krátký text, 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. Taková úprava všech patřičných odkazů však nemusí být na první pohled jednoduchá, zvláště když na ní nebylo myšleno už při tvorbě webových stránek.

Automatizované řešení 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 co je důležité, 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.

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 „(nové okno)“ 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: " (nové okno)";
}

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čítkům nebo odkazům 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 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 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é 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čnou ikonku respektive popisek.

Funkční ukázka

Zdrojový kód ke stažení

Zdrojový kód přístupného značení typů odkazů.

Použité zdroje informací

Autor: Adam Samec

Štítky

přístupnost
Jak na přístupnost