Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

Zobrazují se příspěvky se štítkemskrývání obsahu. Zobrazit všechny příspěvky
Zobrazují se příspěvky se štítkemskrývání obsahu. Zobrazit všechny příspěvky

sobota 14. března 2009

Chybka ve skrývání obsahu stránky a jak ji opravit

Celosvětově doporučovaná technika pro skrývání obsahu stránky pomocí CSS tak, aby obsah nebyl zobrazen, ale současně byl čitelný screenreadery, má jeden potencionální bug. Stávající řešení vypadá následovně:

position:absolute;
left:-1000px;
top:-1000px;
width:1px;
height:1px;
overflow:hidden;

Pokud je v takto skrytém obsahu i prvek, který může získat focus (odkaz nebo formulářový prvek), dochází v případě, kdy uživatel prochází stránku z klávesnice, k tomu, že prohlížeč se snaží k tomu prvku scrollovat.

U prvků, které jsou blízko začátku stránky (například Skip to odkazy), toto řešení žádný problém nepůsobí. Problém nastává tehdy, když je prvek, skrytý tímto způsobem, někde uprostřed stránky - uznávám, méně časté, ale stát se může. Pak dojde k nepříjemnému odscrollování k začátku stránky, což může být pro vidomé uživatele, kteří web ovládají z klávesnice, nepříjemné, protože nemusí vědět, proč se tak děje.

Řešením je změnit top:-1000px; na top: auto. Pak se prvek odsune do dostatečné vzdálenosti doleva, ale výškově zůstává na stejné úrovni a pokud získá focus, tak ke scrollování k začátku stránky nedochází.

Upravená definice tedy vypadá následovně

position:absolute;
left:-1000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;

Skrývat odkazy nebo formulářové prvky tímto způsobem se obecně moc nedoporučuje. Pokud potřebujete skrýt odkaz nebo formulářový prvek tak, aby s ním mohli pracovat všichni uživatelé, ovládající web z klávesnice, použijte řešení, popsané v článku Přeskakovací odkazy nejsou jen pro nevidomé.

Obecně platí, že obsah by měl být běžným návštěvníkům skrýván a uživatelům screenreaderů nabízen pouze v případě, kdy je obsah zřejmý a pochopitelný při vizuálním vnímání, ale už ne poslepu. Příkladem může být třeba skrytý nadpis nad navigační částí - běžný uživatel navigační část snadno identifikuje i bez tohoto nadpisu, uživateli screenreaderu ale tento nadpis pomůže určit, že onen seznam odkazů je hlavní navigace.

Související odkazy