Image replacement metody a přístupnost webu

21.1.2008
Na náš firemní "coders hydepark", jsem si připravil téma: "Image replacement metody". Tak proč se s vámi nepodělit alespoň o základní výcuc?
Co je to vlastně taková image replacement metoda a k čemu nám na webu je?
Ve skutečnosti jde o přístupnost webu a jeho pohodlné přeložení i v jiném zařízení, než je klasický monitor. Například zrakově postiženým lidem pomáhají hlasové čtečky, které právě bez použití nějaké image replacement metody narazí na problém.

Zkuste si v prohlížeči vypnout zobrazování obrázků a sami uvidíte(resp. neuvidíte) spousty textů, které tvoří např. obrázkové nadpisy.

Těchto metod bylo popsáno několik, každá má nějaké klady a většinou i zápory. Tady jsou:

1. Fahrner Image Replacement (FIR)

Základní a asi nejpoužívanější metoda - sám jí(asi z lenivosti) používám

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS, přebytečné SPANy

<h3 id="nadpis">
<span>Nahrazení obrázku</span>
</h3>

/* css */
#nadpis {
width: 200px;
height: 20px;
background-image: url(obrazek-nadpisu.gif);
}
#nadpis span {
display: none;
}

2. Single-pixel Replacement

Tahle metoda je založena na přidání 1px obrázku s ALT textem do zdrojového kódu

To je také hlavní nevýhoda - element navíc.

<h3 id="nadpis">
<img src="1px.gif" alt="Nahrazení obrázku" />
<span>Nahrazení obrázku</span>
</h3>

/* css */
#nadpis {
width: 200px;
height: 20px;
background-image: url(obrazek-nadpisu.gif);
}
#nadpis span {
display: none;
}

3. Radu metoda

Radu metoda pracuje na principu pozicování pomocí CSS vlastnosti MARGIN. Je nutné dopočítávat šířku obrázku k šířce elementu a následně nastavit margin-left: na šířku elementu

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS

<h3 id="nadpis">
Nahrazení obrázku
</h3>

/* css */
#nadpis {
width: 5200px;
height: 20px;
background-image: url(obrazek-nadpisu.gif) no-repeat top right;
margin: 0px 0px 0px -5000px;
}

4. Leahy/Langridge Metoda

Metoda rozšířená o CSS vlastnost overflow: hidden

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS, kvůli IE5 je nutné přidat CSS hack

<h3 id="nadpis">
Nahrazení obrázku
</h3>

/* css */
#nadpis {
padding: 20px 0px 0px 0px;
overflow: hidden;
height: 0px !important;
height /**/:20px;
background-image: url(obrazek-nadpisu.gif);
}

5. Phark Metoda

Zjednodušení Leahy/Langridge metody pomocí CSS vlastnosti text-indent.

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS, nefunguje v IE5.

<h3 id="nadpis">
Nahrazení obrázku
</h3>

/* css */
#nadpis {
text-indent: -200em;
overflow: hidden;
height: 20px;
background-image: url(obrazek-nadpisu.gif);
}

6. Upravená Phark metoda(Phark Revisited)

Tato upravená metoda odstraňuje problémy, které ssebou Phark metoda nesla. To bylo hlavně zalomení v IE5 a zobrazování scrollbarů v Safari

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS

<h3 id="nadpis">
Nahrazení obrázku
</h3>

/* css */
#nadpis {
text-indent: -5000px;
height: 20px;
background-image: url(obrazek-nadpisu.gif);
}

7. Dwyer Metoda

Prakticky shodná metoda s FIR, rozdíl je pouze ten, že místo display:none; pro SPAN element je v CSS nastaveno: display: block; width a height:0; a overflow:hidden;

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS, SPAN navíc

8. Gilder/Levin metoda

Asi nejlepší Image replacement metoda, která řeší problém s vypnutými obrázky a zapnutým CSS

Nevýhody: SPAN navíc - navíc prázdný SPAN hlásí u validátoru varování(to lze odstranit, pokud do spanu přidáme HTML entitu ), text pod obrázkem se zobrazí pokud je obrázek průhledný.

<h3 id="nadpis">
<span> </span>Nahrazení obrázku
</h3>

/* css */
#nadpis {
height: 20px;
width: 200px;
position:relative;
}
#header span
background-image: url(obrazek-nadpisu.gif);
position: absolute;
width: 100%;
height: 100%;
}

9. Lindsay metoda

Tato metoda využívá CSS vlastnosti font-size a color. Velikost textu se nastaví na 1px a barva shodná s pozadím.

Nevýhody: text se nezobrazí při vypnutých obrázcích a zapnutých CSS, text se zobrazí na průhledném nebo přechodovém pozadí.

<h3 id="nadpis">
Nahrazení obrázku
</h3>

/* css */
#nadpis {
width:200px;
height: 20px;
background-image: url(obrazek-nadpisu.gif);
font-size: 1px;
color: #xxx;
}

Můžete sice namítnout, že metody pro nahrazení obrázku textem jsou zbytečné a že každý kdo si chce webové stránky prohlédnout si obrázky přece nebude vypínat. Pro prohlášení o přístupnosti webu jsou však velice důležité a chcete-li toto prohlášení na svůj web umístit, jistě jednu z nich využijete.

Pokud se o Image replacement metodách chete dozvědět více, určitě navštivte tyto stránky, odkud jsem také čerpal.

Kategorie

Archiv

Poslední komentáře

Nejčtenější články

Zajímavé odkazy