Autor Zpráva
jannek19
Profil *
Ahoj, měl bych dotaz, snad jsem to zařadil do správné sekce.

Všímám si toho několik posledních let, ale poslední cca 1-2 roky na to narážím na každém kroku - texty "skryté" přes font-size: 0. Řekl bych, že je to kvůli přístupnosti, aby k takovému textu měly přístup čtečky obrazovek (což nemají, když je text skrytý přes display:none nebo visibility: hidden). Bohužel jsem ale stále nepochopil, proč se používá zrovna font-size: 0, když nefunguje. Alespoň v některých prohlížečích (buď se použije jakoby "font-size: inherit", nebo je zobrazena cca 1px vysoká šmouha (a dlouhá podle délky textu).

Většinou skrývám text pomocí:

position: absolute;
left: 0; // nebo -4000px apod.
top: auto;
width: 1px;
height: 1px;
overflow: hidden;

Dalším možným řešením by bylo skrýt text přes color: transparent, ale nevím, jak je na tom podpora prohlížečů a hlavně jak by s takovým textem zacházely čtečky obrazovek.

Jaký názor na to máte vy? Nějaké zkušenosti z praxe? A kdo přišel na to, že by se měl používat zrovna font-size:0 (nikde se mi nepodařilo dohledat, kdo s tím začal a proč)? Která metoda je podle vás lepší?
_es
Profil
jannek19:
A prečo vlastne texty skrývaš? Ak to je z dôvodu, aby mali niečo iné návštevníci a niečo iné vyhľadávač, tak to je dôvod na postih zo strany vyhľadávača.
jannek19
Profil *
_es:
Jedná se o skrytí ve smyslu: mám tlačítko (odkaz), to tlačítko zobrazuji ve formě nějaké ikonky. Normální uživatelé nemají problém, ti význam tlačítka pochopí, ale nevidomí uživatelé nebudou vědět, k čemu dané tlačítko slouží, proto se u takového tlačítka (odkazu) uvádí text (popis), např.:

<a href="..." class="button search">Vyhledat</a>

Chci takový odkaz zobrazit formou tlačítka s ikonkou lupy a tak, aby text "Vyhledat" nebyl vidět, ale čtečky obrazovek k němu měly přístup. Lepším příkladem by např. bylo logo stránky:

<a href="..." rel="home" class="logo">Můj super web</a>

Logo chceme zobrazit formou obrázku (background-image) bez textu "Můj super web", tak aby k němu měly přístup čtečky obrazovek.

Nebo na většině svých webů používám:

<div class="blind">
    <a href="http://www.ippi.cz/klavesove-zkratky/zakladni.html" accesskey="1">Klávesové zkratky na tomto webu - základní</a>
    <a href="#content" accesskey="0">Na obsah stránky</a>
</div>

To je taky pro normální uživatele potřeba skrýt a pro čtečky nechat.
Bubák
Profil
_es:
A prečo vlastne texty skrývaš?
Podle názvu tématu a textu „aby k takovému textu měly přístup čtečky obrazovek“ soudím, že jannek19 hledá přístupnou alternativu pro obrázky.

jannek19:
V případě obrázků je to jednoduché, použije se atribut značky [/pre]<img>, [pre]alt.
Složitější situace je v případě obrázků na pozadí, třebas u obrázkového menu. Najít řešení vhodné pro hlasové čtečky je brnkačka, ale ale já tipuji (nemám ověřené, pokud někdo upřesní, budu rád), že uživatelů s vypnutími obrázky je více a jednoduché způsoby skrytí textu v tomto případě přístupné nejsou, přístupné by byly v případě vypnutí stylů. Řešením je schovat text pod element s obrázkovým pozadím, v případě vypnutých obrázků budou elementy s obrázkovým pozadím průhledné.
Ideální není žádný způsob, kdysi tady někdo dal odkaz na stránku (v angličtině), kde byly porovnány nejrůznější metody image replacement (náhrady obrázku), zkus pohledat.

Dalším možným řešením by bylo skrýt text přes color: transparent
O poznání větší podporu má opacity, pro starší IE filter + haslayout, ale mám za to, že toto není vhodný způsob skrytí textu.
Kcko
Profil
Bubák:
Asi se jedná o toto? http://css-tricks.com/css-image-replacement/
Bubák
Profil
Kcko:
Ano, díky.
jannek19
Profil *
Za ten odkaz díky, bude se hodit.
janbarasek
Profil
Kvůli skrývání textu se používá atribut alt, který každá inteligentní čtečka umí přečíst, navíc se ho všímají i vyhledávače a pak mu dávají nějakou váhu třeba při hledání obrázků.
Plaváček
Profil
jannek19:

Neskrývej text, pokud nemusíš. Zkus raději využít to, co už vcelku spolehlivě z pohledu přístupnosti funguje. Viz článek (a celý seriál) http://www.zdrojak.cz/clanky/pristupnost-ria-strukturovani-dokumentu-a-pristupnost-z-klavesnice/.
jannek19
Profil *
Plaváček:
Díky, prošel jsem si ten článek a vypadá to dostatečně a fajn, asi to tedy bude vyžadovat určité přepnutí mysli, ale to se poddá. Ještě jednou díky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0