Nahradenie textu obrázkom
Všeobecne známy koncept s anglickým názvom „image replacement“ využíva obrázkové pozadie v CSS, je tu viac než 5 rokov a za ten čas bol mnohokrát modifikovaný a vylepšený. Image replacement ma za úlohu nahradiť text obrázkom s požadovaným obsahom. Z hľadiska prístupnosti je však dôležité v dokumente zachovať pôvodný obsah a ponúknuť tak alternatívu pre používateľov, ktorí nemajú možnosť čítať informácie z obrázkov.
„Fahrner Image Replacement“
Hovorí vám niečo meno Todd Fahrner? Práve tomuto človeku sa pripisujú zásluhy za objav techniky, ktorej zdokonalená podoba je základom takmer každej modernej web stránky. Todd ako prvý popísal spôsob, ako v CSS skryť pôvodný textový element a na jeho miesto vložiť do pozadia obrázok.
Kód je krátky a jednoduchý
h1 {width: 400px;
height: 40px;
background-image: url(nadpis.gif);
}
h1 span {
display: none;
}
...
<h1><span>Nadpis</span></h1>
Ako vyplýva zo štýlopisu, najskôr musíme nastaviť šírku a výšku obaľujucého elementu na rozmery obrázku. Obrázok potom vložíme do pozadia obaľujucého elementu a nakoniec skryjeme samotný text. Ten sa v tomto prípade nachádza vo vnútri elementu .
Toto riešenie má však minimálne jednu chybu. Užívateľ, ktorý má vypnuté zobrazovanie obrázkov, na určenom mieste neuvidí vôbec nič. Okrem toho, ďalší problém nastáva v hlasových čítačkách – napríklad JAWS v mnohých prípadoch ignoruje obsah elementov s vlastnosťou display: none.
Pre úplnosť dodám, že v minulosti sa objavilo riešenie pomocou prázdneho, resp. neviditeľného obrázku s alternatívnym popisom. Ak sa takýto obrázok vložil do obaľujucého elementu, vyplnený alt poskytoval náhradu pôvodného textu. Toto riešenie však nie je moc elegantné, pretože do štruktúry dokumentu pridáva nezmyselný element navyše. Okrem toho je obrázok sémanticky oddelený od pôvodného textu.
Problémy s prístupnosťou čiastočne rieši nasledujúci spôsob. Využíva záporný margin nastavený tak, že posúva text mimo viewport prehliadača. K funkčnosti nepotrebuje nadbytočný vnorený element a hlasové čítačky text neignorujú. Dôležité je zväčšiť šírku elementu o veľkosť marginu a pozadie zarovnať k pravému okraju.
Ukážka kódu
h1 {width: 3400px;
height: 40px;
background: url(nadpis.gif) top right;
margin-left: -3000px;
}
...
<h1>Nadpis</h1>
„Phark“ metóda
Predchádzajúci spôsob zjednodušil Mike Rundle. Namiesto záporného marginu využil vlastnosť text-indent. Odpadá tak nutnosť zväčšovať šírku elementu.
width: 400px;
height: 40px;
background: url(nadpis.gif);
text-indent: -1000em;
}
...
<h1>Nadpis</h1>
Všetky predošlé spôsoby majú jeden spoločný problém. Pri vypnutých obrázkoch zostane na mieste elementu prázdne miesto bez textu.
„Gilder/Levin“ metóda
So skutočne prístupným riešením prišiel Tom Gilder a Alexander Levin. Základom ich riešenia je absolútne pozicovaný element s obrázkom na pozadí. Tento element prekryje pôvodný text a ten nemusí byť žiadnym spôsobom posunutý ani inak odstránený. Pri vypnutých obrázkoch tak na mieste zostane pôvodný text a rieši nedostatky v prístupnosti.
h1 {width: 400px;
height: 40px;
position: relative;
overflow: hidden;
}
h1 span {
display: block;
background: url(nadpis.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
...
<h1>Nadpis<span></span></h1>
Jediný problém nastane, ak obrázok na pozadí využíva priehľadnosť (za obrázkom sa totiž nachádza pôvodný text). V takom prípade je nutné siahnuť po riešení, ktoré pôvodný text skrýva.
Image replacement sa používa najčastejšie na logá a ozdobné nadpisy. Jeho nevýhodou je statickosť – ak chcete zmeniť obsah, ktorý reprezentuje, musíte zmeniť aj samotný obrázok. Preto je jeho využitie limitované na statické objekty. Na dynamický obsah je možné použiť napríklad metódu „sIFR“ a tým vás zároveň pozývam k nasledujúcemu dielu tohto seriálu, ktorý bude vydaný o niekoľko dní.
