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.
2 komentáře:
V tom případě je otázka zda tam to TOP vůbec dávat :-)
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 :)
Okomentovat