Textbilder istället för riktig text

Normalt rekommenderas det inte ur aspekten användarvänlighet att man på webbsidor använder bilder i stället för riktig text. En webb-bild består av pixlar och de läshjälpmedel som t.ex. synskadade använder, kan inte urskilja att en del av pixlarna föreställer text.

När det gäller enstaka rubriker, som inte innehåller så mycket text, kan du dock laborera med lite CSS om du vill använda en bild som rubrik.

Struktur kontra presentation

När det gäller webbdesign är det alltid viktigt att skilja på presentationen av sidan och hur den är strukturerad. Med struktur menar jag ordningen och uppställningen av källkoden.

Utgå alltid från att skapa en så begriplig och logisk struktur som möjligt. Då lägger du också en bra grund för din formgivning, som kommer att bli mycket mer lätthanterlig.

Gör pixlad text läsbar

Låt oss säga att du skapat en rubrikbild i Photoshop och vill använda den istället för t.ex. huvudrubriken. Om du bara byter ut den mot din <h1> tagg rakt av, så kommer din sida rent semantiskt att sakna en huvudrubrik. Med hjälp av lite CSS kan du dock kringå detta problem.

Istället för att ta bort rubriktaggen, ska du sätta din bild som bakgrundsbild till elementet. Det här kräver bl.a. att du sätter samma storlek på elementet som bilden har.

Skriv rubriktexten som vanligt i taggen, men för att den ska göras osynlig knuffar man bort den med ett rejält tilltaget, negativt indrag. Den försvinner då helt ur bild (rent visuellt), men finns fortfarande kvar i källkoden och kan läsas av läshjälpmedel.

HTML, källkod

<h1>Min huvudrubrik</h1>

CSS, formgivning

h1 {
width:362px; height:60px;
background: url(h1.gif) no-repeat;
text-indent: -9999px;
}

Som du förstår är detta inget man ska sätta i system, eftersom du tvingas göra en ny bild och stilregel för varje ny rubrik. Kan dock vara kul på något enstaka ställe för att kunna använda just det där speciella teckensnittet du vill ha.

Alternativet: Bädda in udda teckensnitt

Ett alternativ för att kunna använda ovanliga teckensnitt på en webbsida är att bädda in teckensnittet, så att det laddas in av webbläsaren, istället för av operativsystemet som är det vanliga. Den här metoden är dock lite osäker än så länge.

Läs mer om detta här:

Tid 2010-04-13 (7:03) Kategori Webbdesign och webbutveckling

  1. Märk upp dina webbsidor semantiskt

Dela med dig:

Kommentera inlägget