hdesign blog&portfolio

Egy weboldal grafikai tervezésénél, ha a SEO és Accessibility szempotokat is figyelembe veszünk,  nem használunk olyan szöveges elemeket, melyeket majd képként kell megjelentíteni, nem használunk például élsimítást a szöveghez, hogy az a valóságban is szövegként (pl: <h1>Lorem Ipsum Kft.</h1>) jelenhessen meg.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor ezeket szövegnek “lássa”, mert ugye ha az egy kép, akkor nem “látja”, illetve a látássérülteknek készült olvasóprogramok sem “látják”.

Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.

Erre létezik egy megoldás amit alább részletesen ismertetek.

Elfogadott megoldás a text-indent CSS tulajdonság használata ennek megoldására.

A következő példáben egy képzeletbeli cég logóját fogjuk ezzel a módszerrel felhelyezni a weboldalára.

A text-indent tulajdonság
Ezzel a tulajdonsággal a tömbszerű elemekben levő tartalom első sorának behúzását lehet megadni. Leggyakrabban tabulátorhatás keltésére használják. (Megadható hosszérték, százalék, és öröklés. Alapértéke: 0) (forrás: O’REILLY – CSS zsebkönyv)

A trükk lényege hogy beleírjuk egy h1 tag-be a cég nevét, és css-ben megadjuk a hátterét – ami a cég logója lesz – majd a text-indent tulajdonsággal a beleírt szöveget mínusz értékkel kitoljuk a megjeleníthető területről.

HTML kód:

<div id="header">
<h1>Lorem Ipsum Kft.</h1>
</div>

CSS kód:

#header{
width: 980px;
height: 200px;
}
 
#header h1{
display: block;
width: 300px;
height: 30px;
background: url(img/logo.png) no-repeat;
text-indent: -9999px;
}