Hoppa till huvud innehåll

Allt om LPTT

Allt om LPTT
Meny

Så skapar du tillgängliga mejl

Innehållsförteckning

Du skickar ut nyhetsbrev varje vecka eller transaktionsmejl vid varje köp – men når de verkligen alla dina mottagare? Många mejl blir svåra eller omöjliga att läsa för personer med funktionsnedsättningar. Det kan handla om bilder utan beskrivande text, länkar som säger ”klicka här” eller tabellayout som blir omöjlig att navigera med skärmläsare. Genom att följa några konkreta principer kan du säkerställa att dina mejl når fram till alla – och samtidigt uppfyller kraven enligt LPTT.

Varför är tillgängliga mejl viktiga?

E-post är en av de mest använda digitala kommunikationskanalerna. Över 347 miljarder mejl skickas varje dag världen över, och för företag är e-post ett centralt verktyg för både marknadsföring och transaktionskommunikation. När din verksamhet skickar orderbekräftelser, nyhetsbrev eller lösenordsåterställningar måste dessa mejl fungera för alla mottagare.

LPTT omfattar digitala tjänster riktade till konsumenter, vilket inkluderar e-handelstjänster och banktjänster som kommunicerar via mejl. Om dina transaktionsmejl – som orderbekräftelser, leveransaviseringar eller fakturor – inte är tillgängliga, riskerar du att utesluta kunder från viktig information och bryta mot lagen.

Men tillgängliga mejl handlar inte bara om lagkrav. Det handlar också om att nå fler, bygga förtroende och säkerställa att alla kunder får samma goda upplevelse av ditt varumärke.

Affärsvärdet av tillgängliga mejl

Att investera i tillgängliga mejl är inte bara etiskt rätt – det är också affärsmässigt smart. Här är några siffror som visar varför:

En stor målgrupp som ofta förbises

Cirka 13 procent av befolkningen i USA har någon form av funktionsnedsättning, och i vissa åldersgrupper är siffran ännu högre. Globalt uppskattas över en miljard människor leva med någon form av funktionsnedsättning – det är ungefär 15 procent av världens befolkning. Av dessa har minst 2,2 miljarder människor någon form av synnedsättning.

I Sverige är förhållandena liknande. Det innebär att en betydande andel av dina mottagare kan ha svårt att läsa dina mejl om de inte är tillgängliga.

Mejlmarknadsföring levererar hög avkastning

E-postmarknadsföring har en avkastning på i genomsnitt 42 dollar för varje spenderad dollar – en ROI på 3 600 procent. Men den här potentialen realiseras bara om mottagarna faktiskt kan läsa och interagera med dina mejl.

Studier visar att mejl med personaliserat innehåll har 29 procent högre öppningsfrekvens och 41 procent högre klickfrekvens. Tillgänglighet är en form av personalisering – du anpassar ditt innehåll så att det fungerar för alla, oavsett hur de tar del av det.

De flesta mejl misslyckas med tillgänglighet

Trots det stora affärsvärdet visar forskning från Email Markup Consortium att 99,97 procent av alla HTML-mejl som testats innehåller allvarliga eller kritiska tillgänglighetsproblem. Det innebär att nästan alla företag har stora förbättringsmöjligheter – och en chans att sticka ut genom att göra rätt.

Även om 77 procent av varumärkena säger att de prioriterar tillgänglighet i mejl, följer bara 8 procent bästa praxis i alla sina kampanjer. Det finns alltså ett stort gap mellan intention och handling.

Tillgängliga mejl når fler mottagare

Över 55 procent av alla mejl öppnas på mobila enheter, och 41 procent av mejlvisningar sker på mobiler. Tillgängliga mejl fungerar bättre på alla enheter och i alla situationer – från äldre mobiler med långsam uppkoppling till användare med inställningar för mörkt läge eller större text.

När du skapar tillgängliga mejl bygger du också in bättre struktur och klarare kommunikation, vilket förbättrar upplevelsen för alla mottagare – inte bara de med funktionsnedsättningar.

Vanligaste problemen i mejl

Innan vi går in på lösningarna är det viktigt att förstå vilka problem som är vanligast. Enligt Email Markup Consortiums analys av hundratusentals mejl är här de mest frekventa felen:

Saknad språkdeklaration

Det vanligaste problemet, som förekommer i 86 procent av mejlen, är att språket inte är definierat i koden. Skärmläsare behöver veta vilket språk innehållet är på för att kunna uttala orden korrekt. Utan språkdeklaration kan en skärmläsare försöka läsa svensk text med engelsk uttalsdatabas, vilket gör innehållet oförståeligt.

Tabellbaserad layout

Många mejlmallar använder fortfarande tabeller för att skapa layout istället för att använda tabeller för faktisk tabulär data. För skärmläsare blir detta förvirrande eftersom de försöker läsa upp ”tabelldata” som egentligen är designelement.

Bilder utan alternativtext

Mindre än 25 procent av mejlavsändarna skriver alternativtext för bilder. Det innebär att mottagare som använder skärmläsare, eller vars mejlklient blockerar bilder, går miste om viktig information.

Ogenomtänkt länktext

Länkar med text som ”klicka här” eller ”läs mer” ger ingen information om vart länken leder. Skärmläsaranvändare navigerar ofta mellan länkar med kortkommandon, och då blir dessa generiska texter värdelösa.

Otillräcklig kontrast

Många mejl har för svag kontrast mellan text och bakgrund, vilket gör dem svårlästa för personer med synnedsättning eller färgblindhet. Detta problem har blivit ännu vanligare i takt med att ljusa, pastellfärgade designer blivit populära.

Felaktig eller saknad rubrikstruktur

Rubriker är avgörande för navigation med skärmläsare, men många mejl saknar helt semantiska rubriker eller använder dem inkonsekvent. En skärmläsaranvändare kan hoppa mellan rubriker för att snabbt få en överblick av innehållet – utan korrekt struktur blir mejlet svårnavigerat.

Struktur och semantik

En tydlig struktur är grunden för tillgängliga mejl. Det handlar om att använda HTML semantiskt – det vill säga att koden ska beskriva vad innehållet är, inte hur det ser ut.

Använd rubriknivåer korrekt

Rubriker (H1-H6) skapar en hierarki i ditt innehåll. Börja alltid med en H1 för mejlets huvudrubrik, använd sedan H2 för avsnitt och H3 för underavsnitt. Hoppa inte över nivåer – gå inte direkt från H2 till H4.

Skärmläsare använder rubrikstrukturen som en innehållsförteckning. En användare kan lista alla rubriker och hoppa direkt till det avsnitt som är relevant. Om du bara använder fetstil eller stora typsnitt istället för semantiska rubriker går denna möjlighet förlorad.

Logisk läsordning

Se till att innehållet presenteras i en logisk ordning när det läses uppifrån och ner. Även om din design har komplexa kolumnlayouter måste HTML-koden följa en naturlig läsordning. Använd inte CSS eller tabeller för att flytta innehåll på ett sätt som bryter den logiska följden.

Definiera språk och riktning

Lägg alltid till språkattribut i din HTML. För svenska mejl använder du lang="sv" och dir="ltr" (left-to-right) på det element som omsluter allt innehåll i body-taggen:

<body>
<div lang="sv" dir="ltr">
[ditt innehåll här]
</div>
</body>

Detta hjälper skärmläsare att använda rätt uttalsdatabas och läsriktning.

Text och typografi

Hur du formaterar och presenterar text har stor betydelse för tillgängligheten.

Skriv tydligt och koncist

Använd enkelt språk och korta meningar. Undvik onödigt facklitterärt språk eller krångliga formuleringar. Detta hjälper inte bara personer med kognitiva funktionsnedsättningar eller läs- och skrivsvårigheter – det gör ditt budskap tydligare för alla.

Kontrast mellan text och bakgrund

Enligt WCAG 2.1 nivå AA måste normal text (under 18 punkter) ha en kontrastkvot på minst 4,5:1 mot bakgrunden. För stor text (18 punkter och större, eller fetstil 14 punkter och större) räcker 3:1.

Använd verktyg som WebAIM Color Contrast Checker eller Colour Contrast Analyzer för att verifiera att dina färgval uppfyller kraven. Kom ihåg att många mottagare kommer att läsa ditt mejl i mörkt läge, så testa även kontrasten för den varianten.

Teckenstorlek och radavstånd

Använd minst 14-16 pixlar för brödtext. Se till att radavståndet är generöst – minst 1,5 gånger teckensto rlekan för normal text. Detta gör texten lättare att läsa och minskar risken för att rader flyter samman.

Undvik text i bilder

Text i bilder kan inte förstoras, markeras eller läsas av skärmläsare. Använd alltid riktig HTML-text istället. Om du måste ha text i en bild (exempelvis i en logotyp) måste du komplettera med beskrivande alternativtext.

Bilder och grafik

Bilder kan göra dina mejl mer engagerande, men de måste hanteras rätt för att vara tillgängliga.

Alternativtext för innehållsbilder

Varje bild som förmedlar information måste ha en beskrivande alt-text som förklarar bildens innehåll och funktion. Skriv inte ”bild av…” eller ”foto på…” – beskriv istället vad bilden visar eller vad den kommunicerar.

Exempel på dålig alt-text: ”bild”
Exempel på bra alt-text: ”Röd klänning i siden med v-ringning och knälång kjol, 1 299 kr”

Var koncis men informativ. Försök hålla alt-texten under 125 tecken när det är möjligt.

Dekorativa bilder

Om en bild är rent dekorativ och inte tillför något innehåll bör den ignoreras av skärmläsare. Detta gör du genom att sätta ett tomt alt-attribut: alt="". Observera att attributet fortfarande måste finnas – det ska bara vara tomt.

Logotyper

För företagslogotyper räcker det oftast med företagsnamnet som alt-text. Du behöver inte beskriva designen – fokusera på funktionen.

Komplexa bilder och diagram

För mer komplexa bilder som diagram eller infografik kan en kort alt-text kompletteras med en längre beskrivning i den synliga texten intill bilden.

Länkar och knappar

Länkar är centrala i mejl – de driver trafik och konverteringar. Men de måste vara tillgängliga.

Beskrivande länktext

Länktexten ska beskriva vart länken leder, inte vara generisk. Detta är särskilt viktigt eftersom skärmläsaranvändare ofta använder kortkommandon för att hoppa mellan länkar eller få en lista över alla länkar i mejlet.

Dåliga exempel:

  • ”Klicka här”
  • ”Läs mer”
  • ”Här”
  • ”www.exempel.se”

Bra exempel:

  • ”Vår nya vårkollektion”
  • ”Våra försäkringsvillkor”
  • ”Uppdatera dina kontaktuppgifter”
  • ”Boka tid för rådgivning”

Tillräckligt klickområde

Länkar och knappar bör vara minst 44×44 pixlar för att vara lätta att klicka på mobila enheter. Detta hjälper personer med motoriska svårigheter och gör mejlet lättare att använda för alla.

Tydlig visuell skillnad från vanlig text

Länkar måste skilja sig från vanlig text på fler sätt än bara färg. Använd understrykning eller andra visuella markörer. Kom ihåg: förmedla aldrig information endast med färg.

Färg och kontrast

Färg är ett kraftfullt designverktyg, men det får inte vara det enda sättet att förmedla information.

Förmedla inte information endast med färg

Om du använder färg för att visa status, kategorier eller viktig information måste du komplettera med text, ikoner eller mönster. Cirka 8 procent av män och 0,5 procent av kvinnor har någon form av färgblindhet.

Exempel: Om du markerar obligatoriska fält i ett formulär i rött, lägg även till text som ”(obligatoriskt)” eller en asterisk (*).

Testa kontrastkvoter

Använd verktyg för att kontrollera att alla textfärger har tillräcklig kontrast mot sin bakgrund:

  • WebAIM Color Contrast Checker
  • Colour Contrast Analyzer (CCA)
  • Chrome DevTools kontrast-verktyg

Mörkt läge

Många mejlklienter inverterar automatiskt färger när mottagaren använder mörkt läge. Testa hur ditt mejl ser ut i både ljust och mörkt läge. Vissa färgkombinationer som fungerar i ljust läge kan få för låg kontrast när de inverteras.

Kod och tekniska aspekter

Nu kommer vi till den mer tekniska sidan av tillgängliga mejl.

Semantisk HTML istället för tabellayout

Även om mejlklienter har begränsad CSS-support är semantisk HTML alltid att föredra. Om du måste använda tabeller för layout (vilket fortfarande är vanligt i mejl), markera dem med role="presentation" så att skärmläsare vet att de inte ska behandlas som datatabeller:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">
[layoutinnehåll]
</table>

ARIA-attribut när det behövs

ARIA (Accessible Rich Internet Applications) kan användas för att förtydliga roller och tillstånd, men använd det sparsamt. I mejl är stödet för ARIA begränsat i många klienter. Fokusera först på semantisk HTML, och använd endast ARIA när det verkligen behövs.

Dokumenttitel

Lägg alltid till en <title>-tagg i ditt mejls head-sektion. Denna läses upp först av skärmläsare och ger kontext för hela mejlet:

<head>
  <title>Orderbekräftelse - Ordernummer 12345</title>
</head>

Responsiv design

Mejlet måste fungera på alla skärmstorlekar. Använd media queries och flexibla layouter så att innehållet anpassar sig till olika enheter. Kom ihåg att många mottagare kommer att zooma in eller använda större systemtypsnitt.

Fallbacks för mejlklienter

Olika mejlklienter har väldigt varierande CSS-support. Ha alltid en fungerande fallback för fall där din CSS inte stöds. Ett mejl ska vara läsbart även om all CSS tas bort.

Vanliga mejlklienter och deras begränsningar

De största mejlklienterna har olika nivåer av stöd för tillgänglighetsfunktioner:

  • Apple Mail (iPhone): Bra HTML- och CSS-support, mest använda mobilklienten
  • Gmail: Begränsad CSS-support, strippar vissa HTML-element
  • Outlook: Använder Word-renderingsmotorn, väldigt begränsad CSS-support
  • Yahoo Mail: Måttlig HTML/CSS-support

Testa alltid dina mejl i de vanligaste klienterna som din målgrupp använder.

Nyhetsbrevstjänster och tillgänglighet

Valet av plattform för att skicka dina mejl påverkar hur enkelt det är att skapa tillgängliga utskick.

Hur valet av plattform påverkar tillgängligheten

Många nyhetsbrevstjänster genererar HTML-kod automatiskt baserat på dina val i en visuell editor. Kvaliteten på denna kod varierar kraftigt mellan olika plattformar. Vissa verktyg genererar ren, semantisk HTML medan andra skapar kod med inbyggda tillgänglighetsproblem.

En del plattformar lägger automatiskt till spårningspixlar eller andra element utan att följa tillgänglighetsbästa praxis. Detta kan skapa problem som du inte själv har kontroll över.

Vad du bör fråga din leverantör om

När du utvärderar nyhetsbrevstjänster, ställ dessa frågor:

  • Genererar era mallar semantisk HTML med korrekt rubrikstruktur?
  • Läggs språkattribut (lang och dir) till automatiskt?
  • Hur hanterar ni alternativtext för bilder?
  • Har ni inbyggda verktyg för att testa tillgänglighet?
  • Stödjer ni WCAG 2.1 nivå AA?
  • Kan jag enkelt lägga till role=”presentation” på layouttabeller?
  • Vilka tillgänglighetsfunktioner finns i era färdiga mallar?

Jämförelse av vanliga tjänster

Här är en översikt över hur några populära tjänster förhåller sig till tillgänglighet:

Mailchimp: En av de mest använda plattformerna. Har grundläggande tillgänglighetsfunktioner i sina mallar, men kräver manuella justeringar för att uppfylla WCAG 2.1 AA fullt ut. Erbjuder fält för alt-text men inga automatiska kontroller.

Brevo (tidigare Sendinblue): Liknande funktionalitet som Mailchimp. Mallarna har viss tillgänglighetssupport men behöver anpassas. Inga inbyggda tillgänglighetsverktyg.

Campaign Monitor: Har publicerat egna guider om tillgänglighet och erbjuder mallar med bättre semantisk struktur än många konkurrenter. Fortfarande krävs manuell granskning.

Customer.io: Har integrerat Parcels tillgänglighetskontroll, vilket gör det enklare att identifiera och åtgärda problem före utskick.

HubSpot: Erbjuder tillgänglighetsfunktioner i sina mallar och har viss automatisk kontroll, men resultatet beror på hur du använder plattformen.

Egna mallar vs färdiga mallar

Färdiga mallar är bekväma men ofta svåra att göra fullt tillgängliga. Om du har resurser att utveckla egna mallar har du full kontroll över koden och kan säkerställa att den uppfyller alla tillgänglighetskrav.

Oavsett vilken väg du väljer: använd ett ramverk som MJML eller Foundation for Emails som har tillgänglighet inbyggt i sina komponenter.

Vad du själv kan påverka oavsett verktyg

Oavsett vilken plattform du använder kan du alltid:

  • Skriva bra alternativtext för bilder
  • Välja beskrivande länktexter
  • Säkerställa tillräcklig kontrast i din design
  • Skriva tydlig, koncis text
  • Testa med riktiga skärmläsare
  • Använda en logisk rubrikstruktur i ditt innehåll

Testning av tillgänglighet

Att bygga in tillgänglighet från början är viktigt, men testning är avgörande för att säkerställa att det fungerar i praktiken.

Manuell granskning med skärmläsare

Den viktigaste testmetoden är att själv använda en skärmläsare för att läsa igenom mejlet. Detta ger dig en direkt uppfattning om hur det fungerar.

Skärmläsare att testa med:

Testa på både desktop och mobil. Fokusera på:

  • Kan du navigera logiskt genom innehållet?
  • Läses all viktig information upp?
  • Är rubrikstrukturen tydlig?
  • Fungerar länkarna?
  • Är alt-texterna meningsfulla?

Automatiska verktyg

Automatiska verktyg kan hitta många vanliga problem snabbt:

  • Parcel Accessibility Checker: Specifikt byggd för mejl, gratis community-plan tillgänglig
  • Litmus Email Previews: Har tillgänglighetstest och färgblindhetssimulator
  • Email on Acid: Testar tillgänglighet som en del av sin plattform
  • axe DevTools: Kan användas för att testa HTML-kod
  • WAVE (WebAIM): Kan testa HTML-versioner av mejl

Kom ihåg att automatiska verktyg bara hittar cirka 30 procent av tillgänglighetsproblemen. De måste kompletteras med manuell testning.

Testa i olika mejlklienter

Skicka testmejl till dig själv i olika mejlklienter och enheter:

  • Desktop: Outlook, Apple Mail, Gmail (webmail)
  • Mobil: iPhone Mail, Gmail-appen, Outlook-appen, Samsung Mail
  • Webmail: Gmail, Outlook.com, Yahoo Mail

Kontrollera att:

  • Allt innehåll visas korrekt
  • Bilder som inte laddas inte bryter layouten
  • Mejlet är läsbart även utan CSS
  • Länkar fungerar
  • Text är läsbar i både ljust och mörkt läge

Checklista före utskick

Gå igenom denna checklista innan du skickar:

  • ☐ Har mejlet en beskrivande title-tagg?
  • ☐ Finns språkattribut (lang och dir) satta?
  • ☐ Har alla bilder alternativtext eller tomt alt-attribut?
  • ☐ Är rubrikstrukturen logisk (H1, H2, H3)?
  • ☐ Är alla länkar beskrivande (ingen ”klicka här”)?
  • ☐ Uppfyller alla textfärger kontrastkraven (4,5:1)?
  • ☐ Förmedlas information på fler sätt än bara färg?
  • ☐ Är layouttabeller markerade med role=”presentation”?
  • ☐ Fungerar mejlet med bara tangentbord (för webbversioner)?
  • ☐ Är textstorleken minst 14-16px?
  • ☐ Har du testat med minst en skärmläsare?
  • ☐ Har du kört mejlet genom ett automatiskt testverktyg?

Frågor och svar

Omfattas nyhetsbrev av LPTT?

Det beror på sammanhanget. LPTT omfattar digitala tjänster som erbjuds till konsumenter. Om ditt företag skickar transaktionsmejl som en del av en tjänst som omfattas av LPTT – exempelvis orderbekräftelser från en e-handel eller kontoutdrag från en bank – så omfattas dessa mejl.

Marknadsföringsmejl och vanliga nyhetsbrev omfattas inte direkt av LPTT, men de kan omfattas av andra regelverk beroende på din bransch. Oavsett lagkrav är tillgängliga mejl en viktig del av att nå alla dina kunder och bygga ett inkluderande varumärke.

Hur hanterar jag äldre mejlmallar?

Börja med att prioritera. Gör en inventering av vilka mallar som används mest och börja där. För transaktionsmejl som orderbekräftelser och lösenordsåterställningar bör du prioritera högst eftersom dessa är mest kritiska för användarna.

För äldre mallar:

  • Lägg till språkattribut (lang och dir)
  • Kontrollera och förbättra alt-texter
  • Uppdatera generiska länktexter till beskrivande
  • Testa kontrastkvoter och justera färger vid behov
  • Lägg till role=”presentation” på layouttabeller

Du behöver inte göra om allt på en gång. Varje förbättring räknas.

Vilka mejlklienter måste jag testa i?

Prioritera baserat på din målgrupps användning. Kolla er mejlstatistik för att se vilka klienter era mottagare använder mest. Som ett minimum bör du testa i:

  • Apples Mail-app (iPhone) – mest använda mobilklienten
  • Gmail (webmail och app) – dominerande i många marknader
  • Outlook (desktop) – vanlig på arbetsplatser i Sverige

Komplettera med testning i de klienter som är specifikt vanliga i din målgrupp.

Kan jag använda tabeller för layout?

I mejl är tabellbaserad layout fortfarande vanlig på grund av begränsad CSS-support i vissa klienter, särskilt Outlook. Om du använder tabeller för layout måste du markera dem med role="presentation" så att skärmläsare förstår att det inte är datatabeller:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">

Moderna mejl-ramverk som MJML och Foundation for Emails hanterar detta automatiskt.

Vad är skillnaden mellan HTML-mejl och klartext?

HTML-mejl kan innehålla bilder, färger, länkar och formatering, medan klartext är bara text utan någon formatering. De flesta mejlklienter visar HTML-versionen om den finns.

För tillgänglighet är det viktigt att alltid skicka både en HTML- och en klartextversion. Vissa användare föredrar klartext, och vissa mejlklienter visar bara klartext. Klartextversionen fungerar också som fallback om HTML-versionen inte kan visas.

Din nyhetsbrevstjänst skapar oftast klartextversionen automatiskt, men kontrollera att den blir bra. Ibland behöver du justera den manuellt för att säkerställa att viktiga länkar och information finns med.

Är min nuvarande nyhetsbrevstjänst tillräckligt tillgänglig?

Det finns ingen nyhetsbrevstjänst som garanterar helt tillgängliga mejl automatiskt. Alla plattformar kräver att du själv tar ansvar för tillgängligheten i ditt innehåll.

Testa dina mejl med Parcel eller ett liknande verktyg för att se vilka problem som finns. De vanligaste problemen – som dålig alt-text, generiska länkar och otillräcklig kontrast – är saker du kan åtgärda oavsett vilken plattform du använder.

Relaterade sidor på Allt om LPTT

Resurser och vidare läsning

Verktyg och testning

Forskning och rapporter

Guider och artiklar