Accessibility és SEO: alternatív szövegek

Írta: | 2008. december 01. | kategóriák: (X)HTML, CSS, SEO, Web

A probléma

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</h1>) jelenhessen meg.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor a hasonló elemeket valóban szövegnek ismerje fel, mert ugye ha az egy kép (főleg alternatív szöveg hiányában), akkor nem “látja”. Mitöbb a látássérülteknek készült olvasóprogramok sem tudják megfelelően kezelni,  magyarán nem tudja felolvasni a látássérült ember számára.

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

A megoldás

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 CSS 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érté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.

0


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Erre vannak egyébként a text-indentnél elegánsabb megoldások is, de kétségtelenül ez a leggyorsabb, és a legegyszerűbb 🙂

DjZoNe 2008. december 2. - 21:11

Ez igy igaz, de ez is egy modszer! 🙂

Avatar Tupacko
2008. december 3.
00:04

Régebben hallottam, hogy az ilyesfajat, látható területről való szövegkitolást a keresők nem szeretik. Pontosabban büntetéseket adnak az alkalmazó weboldalnak… De lehet ez csak mítosz… 🙂

Edorn 2009. április 23. - 17:57

Teljes tartalmak kitolása esetében nagyon megváltoztatod azt a képet, amit a kereső lát és amit a felhasználó észlel. Ilyen esetben valóban érhet büntetés.
A leírásban leírt kis eltolásért nem fog megbüntetni egy keresőoldal sem.

Avatar Tupacko
2009. április 23.
19:54

Jobban belegondolva, példaként azt hiszem azt hozták, hogy keresőszavak garmadáját helyezik el így kitolva a honlap már nem látható részére, vagy háttérrel azonos színű betűvel írják ki, esetleg z-index… Így a látogatót nem zavarja, kereső meg azt látja, hogy minden oldalon desokmindent írnak ezekkel a szavakkal… Csak hát az okosabb böngészők állítólag kiszúrják a turpisságot…

Edorn 2009. április 23. - 20:37