Archiv weblogu

26 července 2004

Text za obrázek, obrázek přes text

Jak naložit s textem, který je pomocí CSS přetvořen na obrázek (typické je logo společnosti). Řeším dilema která verze je nejlepší z pohledu přístupnosti, SEO a uživatelského pohodlí. Došel jsem k několika variantám, které už asi kdekdo popsal, ale nemohu se rozhodnout. Každá varianta je zajímavá, ale také nečím nevýhodná.

Neviditelný text s obrázkem na pozadí

První verze počítá s textem obaleným značkou „span“ apod., která jej zneviditelní a pomocí stylů má na pozadí obrázek. Podobné to může být pokud text ve stylech posunu mimo okno prohlížeče.

Klad: Pro SEO ideální, protože informace jsou v textové formě (např.: v nadpisu H1).

Zápor: Základním nedostatkem je když jsou v prohlížeči vypnuté obrázky. Takové řešení totiž nemá alt popisek obrázku a text není vidět kvůli stylům. Řešením by mohl být TITLE popisek textu.

Text za obrázkem

Druhou možností je schovat (opět pomocí stylů) text za obrázek. Musí se ale zajistit, aby v žádném případě text nevyčníval pod obrázkem.

Klad: Při vypnutých obrázcích je vidět text. Pro vyhledávače je informace textová.

Zápor: Text musí být definován tak, aby nevyčníval což bych řešil asi velikostí fontu, která se nedá zvětšít. To je ale při kombinaci vypnutých obrázků a špatného zraku špatné řešení.

Klasický obrázek s ALT a TITLE popiskem

Třetí možnost je mít v HTML klasický obrázek, který bude mít alternativní informaci v popisku.

Klad: Obrázek je obrázkem. Při vypnutých obrázcích v prohlížečích nese svou informaci v textu.

Zápor: Nevím jak je to z pohledu SEO, ale nebude mít asi váhu jako nadpis první úrovně H1.

Obrázek má být obrázkem

V honbě za nejlepším řešením pro vyhledávače jsem se už asi dostal do stavu, kdy věci moc kombinuji. Pomocí kaskádových stylů je možné udělat hodně. Otázka zní jestli je to k užitku. Nakonec jsem došel k názoru, že nemá smysl stavět vyhledávač nad uživatele, ale snažit se vyhovět oběma jednoduchou cestou. Dělání obrázku z textu je nesmysl, protože prostě obrázek není text. Proto se přikláním k verzi kde obrázek je obrázkem. Připravím se tak možná o nějaké plusy z hlediska optimalizace pro vyhledávače, ale na druhé straně nemám ve zdrojáku značky a informace, které tam nepatří.

Přesto mě zajímá jaký na to máte názor. Která verze se Vám zdá nejlepší? Máte-li ještě jiná kvalitní řešení, sem s nimi.