Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

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

2 komentáře:

Jan řekl(a)...

V tom případě je otázka zda tam to TOP vůbec dávat :-)

Tomas Fejfar řekl(a)...

Ono by bylo vůbec hezké mít třeba nějaký header X-Accessibility:1 a to moct využívat v CSSkách a PHP :)