NextToEdit Tech BloggVarför text på bild är dumt

Jag tänkte skriva lite om varför detta är ett problem och hur du kan undvika det för att förbättra tillgängligheten och konverteringarna på din webbplats.

Tillgänglighet: för alla användare

Tillgänglighet handlar om att göra din webbplats användbar för alla, inklusive personer med olika funktionsnedsättningar. När text placeras på en bild, kan skärmläsare (som används av blinda och synskadade personer) inte läsa texten. Detta innebär att viktig information kan gå förlorad för en del av dina besökare.

Ett exempel från verkligheten

Låt oss säga att du driver ett medelstort företag som säljer hälsoprodukter. Du har en fantastisk kampanj med ett specialerbjudande som endast visas som text på en bild. En potentiell kund som använder en skärmläsare missar helt erbjudandet och går vidare till en konkurrent. Du har just förlorat en konvertering på grund av otillgänglighet.

SEO: bättre synlighet på webben

Hur tillgänglighet och SEO hör ihop tål att upprepas. Text på bilder påverkar också din sökmotoroptimering (SEO). Sökmotorer som Google kan inte "läsa" text på bilder på samma sätt som de kan läsa vanlig HTML-text. Detta betyder att viktig information som du vill ska rankas högt i sökresultat kan förbises.

Använd alltid alt-texter

En grundregel är att alltid använd alternativtext (alt-text) för dina bilder. Alt-text hjälper inte bara med SEO, utan också med tillgänglighet genom att ge en textbeskrivning av bilden för skärmläsare.

Alt-texter är i sig lite av ett eget område. Jag kommer därför göra ett separat inlägg om det framöver.

Användarupplevelse: gör det enklare för användarna

När text placeras på bilder, kan det också påverka läsbarheten. Om texten inte har tillräckligt med kontrast mot bakgrunden eller om bilden är av dålig kvalitet, blir det svårt för användarna att läsa informationen. Detta kan leda till att besökare snabbt lämnar din webbplats, vilket påverkar din "bounce rate" negativt. Bounce rate är det mått som används inom webbanalys för att mäta hur många som kommer till en webbplats och sedan lämnar den utan att göra något.

Personlig erfarenhet

När jag nyligen besökte en webbplats för en lokal butik, lade jag märke till att deras öppettider endast visades som text på en bakgrundsbild. Det var svårt att läsa och jag blev frustrerad och irriterad. Istället för att försöka förstå texten, gick jag vidare till en annan webbplats som var mer användarvänlig. Jag vet att jag inte är ensam om denna upplevelse.

Alternativa lösningar: så här gör du istället

Först vill jag bara lyfta fram vikten av att tänka på att "låta bild vara bild" och "text vara text". Text har oftast syftet att kommunicera. Så syftet att nå fram med textens budskap- för alla- bör vara högsta prio.

1. Använd HTML-text istället för text på bilder: Placera texten direkt på sidan med hjälp av HTML och CSS. Detta säkerställer att texten är läsbar för både användare och sökmotorer.
2. Använd tillräcklig kontrast: Om du måste använda text på en bild (t.ex. för en banner), se till att texten har tillräckligt med kontrast mot bakgrunden för att vara läsbar.
3. Ge alt-text för alla bilder: Som nämnt tidigare, använd alt-text för att beskriva bilder. Detta hjälper både tillgänglighet och SEO.

Sammanfattning

Att använda text på bilder kan verka som en bra idé vid första anblicken, men det kan få negativa konsekvenser för både tillgänglighet och användarupplevelse. Genom att vara medveten om detta och tänka till ett varv innan du publicerar bilder, kommer du kunna fatta smartare val. Använder du HTML-text och tillräcklig kontrast, kan du nå flera. Du förbättrar din webbplats, gör den mer tillgänglig och ökar konverteringarna. Kom ihåg - en tillgänglig webbplats är en framgångsrik webbplats.

Så nästa gång du funderar på att lägga till text på en bild, tänk på användarupplevelsen och tillgängligheten först. Dina besökare (och din konverteringsfrekvens) kommer att tacka dig!

Vill du få fler tips om bilder och tillgänglighet? Just nu har vi "Tema: bilder" på NextToEdit Tech Solutions Instagramkonto. Läs mer där, och följ oss gärna om du inte redan gör det!