Tillgänglig e-handel för alla – Genomtänkt frontend och texter som vägleder

I de tidigare delarna i artikelserien om Tillgänglig e-handel för alla gick vi igenom kundernas behov och lagkrav samt inkluderande design och strukturerade flöden och processer. Vi kommer framöver även att titta på tips för att anpassa och förbättra din sajt. I den här delen fokuserar vi på genomtänkt frontend och texter som vägleder.

Tillgänglig e-handel för alla

När man jobbar med resten av tillgängligheten på en webbsida behöver man även komma ihåg att jobba med texterna och innehållet.

Tillgängliga texter utgår från vad användaren ska veta, göra och tycka. Det ska upplevas som enkelt, hur köpet genomförs och att rätt information kan hittas. Alla konsumenter ska kunna läsa texterna, lyssna eller ta till sig dem på något annat sätt.

När man jobbar med tillgängliga texter på sajten så kan man ha extra fokus på några olika kategorier förutom själva brödtexten och innehållet:

  • Rubriker
    När man sätter rubrik är det viktigt att hålla den lagom lång. 5-10 ord, men det kan räcka med färre. Se till att använda nyckelordet för sidan och sätt det först eller långt fram. Som med alla tillgängliga texter är tydlighet viktigt.
  • Länktexter och knapptexter
    Var även tydlig med texter till länkar och knappar så att de blir informativa. Tala om vad som händer när användaren klickar. Använd gärna verb i uppmaningsform och fundera på hur ni kan skriva mer konkret.
  • Etiketter och ledtexter
    På samma sätt är det viktigt att ge tydliga ledtexter vid inmatningsfält och kryssrutor, gärna konkret och kort med all nödvändig information med. Namn kan till exempel behöva vara preciserat till För- och efternamn. Vilket format ska anges? Är fältet obligatoriskt eller ej? Var konsekvent med formuleringar av svarsalternativ och jakande. Det blir förvirrande och vilseledande med ”Skicka inte nyhetsbrev till mig”.
  • ALT-texter (textalternativ)
    När man jobbar med tillgängliga ALT-texter är det viktigt att skilja på bilder så mycket som möjligt. När det gäller produktbilder – vad skiljer den från andra produkter? Beskriv det så noggrant du kan. När det gäller knappar – vad är funktionen? Ett hjärta säger inte så mycket, men Mina favoriter blir en tydligare beskrivning av själva funktionen.
  • Hjälpande texter
    Gå igenom vad användaren behöver veta innan flödet. Vilken information behövs innan leveransen? Vilken text ska visas om något har blivit fel, om man till exempel skrivit in i fel format?
Gör det gärna tydligt för användaren vad man ska göra innan i stället för bara efter om man gjort fel. Till exempel att man behöver ange 12 siffror i personnumret i stället för 10. Det kan stå tydligt som en vägledning vid inmatningsrutan så att man ser i vilket format man förväntas fylla i till exempel ett personnummer eller mobilnummer.

Gör det lätt att göra rätt

Det finns olika former av hjälpmedel för att lättare ta sig runt på Internet som till exempel skärmläsare. Heter alla knappar Köp så blir det svårt att uppfatta kopplingen till en specifik produkt. En lösning på detta problem är att se till att ARIA-attribut på köp-knappen används där det tydligt beskrivs vad man köper. ARIA som står för Accessible Rich Internet Applications är en samling attribut och regler som kan läggas till HTML-element på webbplatsen. De ger sedan skärmläsare och andra hjälpmedel information för att kunna tolka webbplatsens innehåll så att det kan presenteras på ett mer tillgängligt sätt.

Så lyckas du med språket i e-handeln

Oavsett om du publicerar en text för första gången på sajten, eller om du gör ett omtag så är det viktigt att jobba med språket och texterna så tidigt som möjligt.

  • Ett tips är att skriva så enkelt och kort som det går samtidigt som allt väsentligt kommer med. Kan något missförstås?
  • Försök att vara konsekvent både i ton och ordval så användaren känner igen språkbruket på olika sidor.
  • Tänk även på layouten, hur blir det enkelt och logiskt att läsa? Hur är placeringen av knappar, fält och text?
  • Där det är möjligt kan punktlistor vara användbart för att lättare hitta viktig information.
  • Fundera även på var text kan kompletteras med bilder, film eller ljud.
  • När man vill att användaren ska göra något är det bra att använda verb så att det blir uppenbart vad man vill.

Använder du AI för att ta fram några texter så se till att gå igenom dem ordentligt för att upptäcka eventuella brister eller förbättringar. Korrekturläs allt innan det publiceras online för att riktigt jobba igenom texterna.

I nästa del i artikelserien om Tillgänglig e-handel för alla kommer vi att ge några tips för att anpassa och förbättra din sajt och titta på några av de vanligaste problemen.

Tillgänglig e-handel för alla – Kundernas behov och lagkrav

Från 28 juni 2025 måste bland annat e-handeln leva upp till krav på tillgänglighet för personer med funktionsnedsättning – även tillfällig sådan. Tidigare har detta bara varit lagkrav för offentlig sektor. Vad innebär de nya EU-reglerna i praktiken och hur ser kundernas behov ut?

Läs mer

Tillgänglig e-handel för alla – Strukturerad och inkluderande design

Ett begrepp som knyter an till tillgänglighet är inkluderande design. Inkluderande design handlar om att skapa produkter och tjänster som förstår och möjliggör för människor med olika bakgrunder och förmågor. Exempelvis kön, ålder, språk, ekonomi och geografi. Målet är att tillgodose så många användarbehov som möjligt, inte bara så många användare som möjligt.

Läs mer
Sofia Winterlén

Sofia Winterlén Marknadsansvarig