Skočit na obsah

Zneviditelnění obsahu v CSS a problém hlasových čteček

Již nějakou dobu je známo, že hlasové čtečky mají problém s konvenčními metodami ukrývání obsahu skrze CSS. Podívejme se na to, jaké metody jsou problematické, čím jsou podmíněny a jak by se vlastně zneviditelňování mělo provádět.

Andrew Kirkpatrick se zaměřil na známý problém, kdy hlasové čtečky nesprávně interpretují vlastnosti kaskádových stylů, které se používají pro zneviditelnění prvků na stránce. Konkrétně jsou to disply:none a visibility:hidden.

Ve zkratce jde o to, že ačkoliv by tyto vlastnosti hlasové čtečky ze své podstaty interpretovat neměly, většina z nich to dělá. Výrazně na tento fakt upozornil Joe Clark ve svém článku Facts and Opinion About Fahrner Image Replacement, kde mimojiné uvedl seznam hlasových čteček, u kterých tento problém nastává.

Andrew Kirkpatrick však Clarkovu argumentaci rozšířil o to, že se chování čteček liší, jsou-li styly volány ze značky <style>, pomocí značky <link>, je-li vlastnost obsahem inline atributu style, nebo jsou styly vkládány přes @import.

O tom, jak vlastně čtečky v jednotlivých případech ke zneviditelňování přistupují, se můžete přesvědčit sami v přehledné tabulce. Obecně lze jeho závěry shrnout tak, že nejpoužívanější čtečky vesměs skutečně obsah ukrytý pomocí disply:none a visibility:hidden nečtou.

Jak tedy správně schovávat obsah?

Pakliže chcete v CSS ukrýt některý prvek, ale chcete mít jistotu, že jej hlasová čtečka skutečně přečte a nebude ho ignorovat (typicky třeba pro nahrazování nadpisů obrázky nebo neviditelného odkazu pro přeskočení dlouhé navigace), je třeba použít jinou techniku, než disply:none nebo visibility:hidden.

První příklad nabízí rovnou Andrew. Je to metoda pomocí vlastnosti text-indent se zápornou hodnotou. Tedy např. takto:

<a href="#content" class="invisible">Přeskočit navigaci</a>
...
.invisible {text-indent:-100em;}

Druhou metodu nabízí WebAim a použil jsem jí i já na tomto webu. Je to metoda absolutně pozicovaného prvku vysunutého mimo obrazovku:

<a href="#content" class="invisible">Přeskočit navigaci</a>
...
.invisible {
     position:absolute;
     top:-500px;
     left:0;
     width:1px;
     height:1px;
     overflow:hidden;
}

Obě tyto metody by měly spolehlivě zařídit přesně to, co potřebujeme. Tedy zneviditelnění části obsahu pro grafické prohlížeče, avšak jeho stálou přítomnost pro hlasové čtečky.

Přidejte svůj komentář

David Špinar | 25. května 2004 | 145 komentářů | Trvalý odkaz

Hledání


Nové komentáře

Tip pro vás

Kurz přístupného webu

Chcete-li ušetřit za drahé konzultace a audity přístupnosti, doporučuji navštívit jednodenní Kurz tvorby přístupného webu.

Doporučuji

H1.cz: Odborné poradenství pro podnikání na Internetu

H1.cz: Odborné poradenství pro podnikání na Internetu

Kniha Tvoříme přístupné webové stránky

Více informací o mé knize

Reklama

Kvalitní hosting

Jednotná cena, individuální přístup. 500 MB, PHP, MySQL, antispam.

www.Cesky-Hosting.cz

 

Přístupnost - web a weblog věnovaný přístupnosti webových stránek, který píše David Špinar

Prohlášení o přístupnosti | RSS weblogu | RSS komentářů weblogu | Vypnout CSS | Hostováno u Český hosting | Doména u IInfo