Různé způsoby skrývání HTML obsahu - Jak na přístupnost

Obecně platí, že webová stránka nebo aplikace by měla být navržena tak, aby zprostředkovala co možná nejpodobnější dojem či informace jak uživateli, který odečítač obrazovky nepoužívá, tak tomu, kdo jej používá. Nicméně občas vyvstane potřeba nějakou část obsahu skrýt výhradně před tou či onou skupinou uživatelů. V tomto článku se proto zaměříme na to, jak správně skrýt určitý obsah podle toho, komu má být obsah poskytnut a komu ne.

Skrývání obsahu jen před vidícími uživateli

Začněme tím, kde správné řešení není tak nasnadě. Případy, kdy chceme, aby nějaký obsah byl poskytnut jen uživateli odečítače obrazovky, ale vidícím uživatelům ne, jsou například následující:

Vizuálně skrytý odkaz na úplném začátku stránky pro přeskočení na její hlavní obsah, tzv. skip link.
Vizuálně skryté nadpisy, kdy chceme aby tyto sloužily jako jakési navigační kotvy, na které může uživatel odečítače snadno přeskočit, ale jež by na stránce z hlediska vizuálního designu vadily.
Využití CSS pseudotřídy „:after“ pro automatické přidávání vizuálně skrytých textových popisků k odkazům na stránky otevírající se v novém okně nebo k odkazům na soubory ke stažení. Tyto popisky zastupují ikonky sloužící pro stejný účel vidícím uživatelům.

V zásadě fungují minimálně dvě techniky, jak pomocí CSS nějaký prvek na stránce skrýt před vidícími uživateli, ale jak zároveň předejít tomu, aby takové prvky ignoroval také odečítač obrazovky. Jako nejpřímočařejší řešení by nás totiž mohlo napadnout u požadovaného prvku nastavit, ať už prostřednictvím CSS nebo HTML, nulovou šířku, výšku nebo obojí. Takové nastavení však způsobí, že i odečítač obrazovky bude tento prvek považovat za skrytý a nebude jej číst. Zmíněné dvě techniky, jak obsah skrýt jen vizuálně jsou následující:

Posunout daný prvek daleko mimo obrazovku, například pomocí CSS vlastnosti „left“, kdy této vlastnosti nastavíme nějakou vysokou zápornou hodnotu. Toto řešení se většinou nedoporučuje z toho důvodu, že styly pro pozicování mohou být u uživatele zakázány.
Oříznout prvek pomocí CSS vlastností clip-path a clip tak, aby z prvku nic vizuálně nezbylo . Toto je pravděpodobně nejjistější a doporučované řešení.

Výsledná CSS třída, kterou můžeme aplikovat na element, jež chceme zpřístupnit jen uživatelům odečítačů pak může vypadat následovně:

.srOnly {

    clip: rect(1px, 1px, 1px, 1px);

    clip-path: inset(50%);

    height: 1px;

    width: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

}

Skrytý obsah odkazovaný přes atributy „aria-labelledby“ nebo „aria-describedby“

Do kategorie obsahu skrytého jen před vidícími uživateli lze zahrnout i případ, kdy nějaký prvek sice skryjeme před všemi uživateli přes CSS vlastnost „display: none“, „visibility: hidden“ či jinou metodou, avšak odkážeme na něj prostřednictvím atributu aria-labelledby nebo aria-describedby. Takový prvek nebude viditelný vidícími uživateli ani čitelný kurzorem odečítače, avšak bude ohlášen odečítačem v momentě přesunutí fokusu klávesnice na element, na kterém je atribut „aria-labelledby“ nebo „aria-describedby“ nastaven.

Tuto techniku využijeme například, když chceme k určitému elementu ve formuláři uživatelům odečítačů přidat nějaký text vysvětlující okolnosti nebo kontext, jež je zřejmý jen vizuálně.

Skrývání obsahu jen před odečítači

Až na níže uvedené výjimky, atribut pro skrytí HTML elementu před odečítači, který v nejčastějších případech hledáme, je aria-hidden=“true“. Tento atribut se používá typicky v případě, chceme-li před odečítačem skrýt obsah okolo modálního dialogu a dále například pro skrývání obrázků, jak je popsáno v následující sekci.

Jak správně skrývat dekorativní nebo nadbytečné obrázky?

Existují dva následující doporučené způsoby, jak před odečítači úplně skrýt obrázek, který má jen dekorativní účel (například grafický banner stránky), nebo který zprostředkovává informaci, jež je duplicitní vzhledem ke kontextu daného obrázku (například graf, jehož popis je uveden v okolním textu) nebo ikona trojúhelníku s vykřičníkem následovaná chybovou hláškou:

První možností skrývání je nastavit obrázku atribut „alt“ na prázdnou hodnotu. Pozor na to, že atribut „alt“ s prázdnou hodnotou není ekvivalentem odstranění tohoto atributu. Při odstranění „alt“ atributu totiž bude obrázek odečítačem rozpoznán, a to jako grafika, které chybí pojmenování.
Druhou možností skrývání je nastavit na obrázku atribut aria-hidden=“true“, přičemž obrázek může mít zároveň nastavený také atribut „alt“ na neprázdnou hodnotu. Tento způsob skrývání obrázku je dobré volit v případech, kdy z nějakého důvodu chceme, aby byl obrázek pojmenovaný, ale přesto skrytý před odečítači. Tím důvodem může být optimalizace pro vyhledávače (SEO) – můžeme například chtít pojmenovat logo v hlavičce stránky, aby si vyhledávače spárovaly obrázek loga s názvem stránky nebo společnosti, ale aby odečítače takový obrázek ignorovaly.

K čemu jsou pak dobré atributy role=“presentation“ a role=“none“?

Atribut role=“presentation“, popřípadě jeho ekvivalent role=“none“, neslouží ke skrývání celého elementu před odečítačem, ale jen k skrytí jeho sémantiky, přičemž toto funguje jen u elementů, které nejsou zaměřitelné fokusem (například tedy u nadpisů, tabulek, seznamů nebo obrázků). V praxi se tento atribut používá v následujících případech:

Na elementu <table> k odstranění sémantiky tabulky, která má sloužit jen pro rozvržení stránky, kdy nechceme, aby odečítač stránku uživateli interpretoval jako tabulku.
K odstranění sémantiky strukturálních HTML elementů, například <li>, které slouží jako záložní řešení při absenci podpory specifikace ARIA během implementace složených komponent využívající role jako jsou „menu“, „tablist“ nebo „tree“. Příkladem takového použití role „presentation“ nebo „none“ je implementace navigačního menu otevíraného tlačítkem.

Skrývání obsahu před všemi uživateli

Typickými příklady obsahu schovaného před všemi uživateli jsou dočasně skrytá rozbalovací menu, dialogy nebo panely záložek. Nejčastější techniky skrývání jsou pak následující:

Aplikování CSS vlastnosti „display: none“.
Nastavení atributu hidden na HTML elementu.
Aplikování CSS vlastnosti „visibility: hidden“.

Použité a další zdroje informací

Autor: Adam Samec

Štítky

přístupnost

Jak na přístupnost