Hoppa till huvud innehåll

Allt om LPTT

Allt om LPTT
Meny

LPTT för UX writers, redaktörer och kommunikatörer

Innehållsförteckning

Som UX writer, redaktör eller kommunikatör är du nyckeln till tillgänglig kommunikation. Ditt språk, dina ord och din struktur avgör om användare förstår och kan använda produkten. Den här guiden hjälper dig skapa innehåll som är tillgängligt, inkluderande och användbart för alla – från mikrokopior till längre texter.

Ditt ansvar som innehållsskapare

Tillgänglighet handlar inte bara om teknisk implementation – innehåll och språk är minst lika viktigt. Som UX writer, redaktör eller kommunikatör har du ansvar för att säkerställa att ord, struktur och ton gör produkten användbar för alla.

Språklig tillgänglighet

  • Tydlighet: Skriv så att alla kan förstå, oavsett läsförmåga eller kognitiv kapacitet
  • Enkelhet: Använd plain language och undvik onödigt krångel
  • Konsekvens: Använd samma termer för samma saker genom hela upplevelsen
  • Inkludering: Undvik exkluderande språk och stereotyper

Strukturell tillgänglighet

  • Rubrikstruktur: Skapa logisk hierarki med H1-H6
  • Listor och gruppering: Organisera information för enkel skanning
  • Länktexter: Skriv beskrivande länkar som fungerar utan kontext
  • Alternativtexter: Beskriva bilder och grafik meningsfullt

Funktionell tillgänglighet

  • Instruktioner: Ge tydliga, steg-för-steg vägledningar
  • Felmeddelanden: Förklara vad som gick fel och hur man fixar det
  • Formuläretiketter: Beskriv vad varje fält ska innehålla
  • Knapptexter: Tydliggör vad som händer när användaren klickar

Kom ihåg: Din text läses av skärmläsare som NVDA, JAWS och VoiceOver. Det som är meningsfullt visuellt måste också fungera auditivt.

Klarspråk – grunden för tillgänglig text

Vad är klarspråk?

Klarspråk innebär att skriva så att läsaren förstår budskapet direkt, utan att behöva läsa om. Det handlar inte om att dumma ner eller förenkla över – det handlar om att respektera läsarens tid och kognitiva kapacitet.

Grundprinciper för klarspråk

Använd korta, vardagliga ord:

  • Istället för: ”Utnyttja”, ”implementera”, ”facilitera”
  • Skriv: ”Använd”, ”genomför”, ”möjliggör”

Skriv korta meningar:

  • Ideal längd: 15-20 ord per mening
  • Max: 25-30 ord innan du bör dela upp
  • Variera: Blanda korta och medellånga för bättre läsflöde

Använd aktiv röst:

  • Passiv: ”Formuläret måste fyllas i innan det kan skickas”
  • Aktiv: ”Fyll i formuläret innan du skickar det”

Skriv direkt till läsaren:

  • Opersonligt: ”Användaren kan ändra sina inställningar”
  • Direkt: ”Du kan ändra dina inställningar”

Klarspråk i praktiken

Före och efter-exempel:

Före (komplext språk):
”Beträffande den tidigare kommunicerade informationen angående systemets funktionalitet vid autentisering, konstateras att användarens credentials måste verifieras innan tillträde till applikationen kan medges.”

Efter (klarspråk):
”Du måste logga in med ditt användarnamn och lösenord för att använda appen.”

Skriva tillgängliga mikrotexter

Knapptexter som fungerar

Beskriv åtgärden, inte plattformen:

  • Dåligt: ”Klicka här”, ”Tryck här”
  • Bra: ”Spara ändringar”, ”Ladda ner rapport”, ”Boka möte”

Var specifik och förutsägbar:

  • Dåligt: ”OK”, ”Skicka”, ”Gå vidare”
  • Bra: ”Bekräfta köp”, ”Skicka meddelande”, ”Gå till betalning”

Använd verbformer konsekvent:

  • Imperativ: ”Lägg till i varukorg” (ger order)
  • Presens: ”Lägger till i varukorg” (beskriver handling)
  • Välj en stil och håll dig till den genom hela produkten

Formuläretiketter och hjälptext

Etikettera varje fält tydligt:

  • Skriv etiketten: Inte bara placeholder-text
  • Var specifik: ”E-postadress” istället för bara ”E-post”
  • Placera rätt: Ovanför eller till vänster om fältet

Ge användbar hjälptext:

  • Format: ”Skriv ditt telefonnummer med 10 siffror, utan mellanslag”
  • Begränsningar: ”Lösenordet måste vara minst 8 tecken”
  • Exempel: ”Till exempel: 0701234567”

Exempel på bra formulärfält:

Dålig etikett:
Textfält med placeholder: ”namn”

Bra etikett:
Förnamn (obligatoriskt)
Skriv ditt förnamn som det står i passet
[Textfält]

Felmeddelanden som hjälper

Tre komponenter i bra felmeddelanden:

  1. Vad är problemet: ”E-postadressen är ogiltig”
  2. Varför det är fel: ”Den måste innehålla ett @-tecken”
  3. Hur man fixar det: ”Kontrollera stavningen och försök igen”

Ton i felmeddelanden:

  • Undvik anklagelser: Inte ”Du angav fel lösenord”
  • Var hjälpsam: ”Lösenordet stämmer inte. Försök igen eller återställ ditt lösenord”
  • Var specifik: Inte bara ”Ett fel uppstod”

Skriva beskrivande länkar

Varför länktexter är kritiska

Skärmläsare kan lista alla länkar på en sida. Om alla länkar säger ”Klicka här” eller ”Läs mer” har användaren ingen aning om vart de leder. Länkar måste vara meningsfulla även utan omgivande kontext.

Principer för bra länkar

Beskriv destinationen:

Gör länken självständig:

Var specifik om filtyp och storlek:

Meddela om länken öppnas i nytt fönster:

Alternativtexter för bilder

Vad är alternativtext?

Alternativtext (alt-text) är text som beskriver en bild för personer som inte kan se den. Skärmläsare läser upp alt-texten istället för att visa bilden. Det är din uppgift som innehållsskapare att skriva dessa beskrivningar.

När behöver bilder alt-text?

Informativa bilder – behöver beskrivning:

  • Produktbilder: Beskriv vad produkten är
  • Diagram och grafer: Beskriv data eller trend
  • Instruktionsbilder: Beskriv vad bilden visar
  • Innehållsbilder: Beskriv relevant innehåll

Dekorativa bilder – tom alt-text:

  • Bakgrundsmönster: Rent visuella element
  • Spacers: Bilder för layout
  • Redundant innehåll: När bilden redan beskrivs i text
  • Använd: alt="" (tom sträng)

Skriva bra alternativtexter

Grundprinciper:

  • Var koncis: Helst under 150 tecken
  • Beskriv innehåll, inte utseende: Vad bilden visar, inte hur den ser ut
  • Inkludera relevant kontext: Varför bilden är där
  • Undvik ”bild av”: Skärmläsaren säger redan att det är en bild

Exempel på bra alt-texter:

Produktbild:
Dåligt: ”Produkt”
Bra: ”Svart läderväska med justerbara axelband”

Diagram:
Dåligt: ”Graf”
Bra: ”Stapeldiagram som visar försäljningsökning från 20 miljoner kr 2023 till 35 miljoner kr 2024”

Instruktionsbild:
Dåligt: ”Skärmbild”
Bra: ”Klicka på inställningar-ikonen i övre högra hörnet”

Komplexa bilder och längre beskrivningar

För komplexa bilder som diagram, infografik eller detaljerade illustrationer räcker inte alt-text. Du behöver också:

  • Kort alt-text: Sammanfattning av bildens syfte
  • Lång beskrivning: Detaljerad förklaring i omgivande text eller separat sida
  • Data i textformat: Tabeller eller listor som komplement

Strukturera innehåll tillgängligt

Rubrikstruktur som fungerar

Logisk hierarki:

  • En H1: Sidans huvudrubrik
  • H2 för huvudsektioner: Stora delar av innehållet
  • H3 för undersektioner: Under varje H2
  • Hoppa inte nivåer: Aldrig H1 → H3 utan H2 emellan

Beskrivande rubriker:

  • Undvik kryptiska rubriker: Inte bara ”Introduktion” eller ”Detaljer”
  • Gör dem självbeskrivande: ”Hur du bokar ett möte” istället för ”Steg 1”
  • Använd nyckelord: Hjälper både skärmläsare och SEO

Listor och punktlistor

När ska du använda listor:

  • Steg i en process: Numrerad lista
  • Samling av relaterade saker: Punktlista
  • Tre eller fler element: Använd lista istället för kommaseparerad text

Introduktion till listor:

  • Använd inledande mening: ”Så här bokar du ett möte:”
  • Avsluta med kolon: Signal till läsaren att lista kommer
  • Gör listan självständig: Fungerar även utan inledning

Tabeller som är tillgängliga

När ska du använda tabeller:

  • Strukturerad data: Jämförelser, statistik, prislistor
  • Inte för layout: Använd aldrig tabeller för att positionera innehåll

Skriv tydliga tabellrubriker:

  • Första raden: Kolumnrubriker som beskriver innehållet
  • Första kolumnen: Radrubriker om tabellen är tvådimensionell
  • Beskrivande text: Inte bara ”Kolumn 1” eller ”Rad A”

Lägg till tabellsammanfattning:

  • Caption: Kort titel på vad tabellen visar
  • Beskrivning: Mer utförlig förklaring om tabellen är komplex

Inkluderande språk och ton

Könsneutralt språk

Undvik onödiga könsmarkörer:

  • Istället för: ”användaren…han kan”, ”läkaren…hon ska”
  • Använd: ”du kan”, ”användaren kan”, ”läkaren ska”

Använd inkluderande titlar:

  • Istället för: ”manhours”, ”fireman”, ”chairman”
  • Använd: ”arbetstimmar”, ”brandman/brandbekämpare”, ”ordförande”

Undvik ableistiskt språk

Språk som exkluderar personer med funktionsnedsättningar:

  • Undvik: ”Det är galet”, ”blind för”, ”handikappad av”
  • Använd: ”Det är konstigt”, ”omedveten om”, ”begränsad av”

Fokusera på funktion, inte förmåga:

  • Undvik: ”Använd mushjulet”, ”Se bilden”, ”Lyssna på”
  • Använd: ”Scrolla”, ”Visa/dölj bilden”, ”Spela upp”

Kulturell och språklig inkludering

Undvik idiom och kollokvialismer:

  • Problem: Svåra att förstå för personer med annat modersmål
  • Exempel att undvika: ”Lägg alla ägg i samma korg”, ”Ta till rors”
  • Använd istället: Direkta, bokstavliga beskrivningar

Var medveten om kulturella referenser:

  • Undvik: Referenser till lokala högtider, sport-events, TV-program
  • Om nödvändigt: Förklara referensen

Multimedieinnehåll och alternativ

Video-innehåll

Textning (captions):

  • Alla tal: Vem som pratar och vad de säger
  • Viktiga ljud: [musik], [applåder], [dörr stängs]
  • Synkronisering: Text ska synas samtidigt som talet

Transkript:

  • Fullständig textversion: Allt som sägs och visas
  • Visuella element: Beskriv viktiga scener och handlingar
  • Tidsstämplar: Hjälper användare navigera

Audiodeskription:

  • För komplex visuell information: Beskriv vad som händer
  • Mellan dialoger: Lägg till beskrivningar i pauser
  • Alternativt: Ge detaljerad beskrivning i transkriptet

Podcast och audio-innehåll

Ge alltid transkript:

  • Fullständig text: Allt som sägs
  • Identifiera talare: Vem som pratar när
  • Ljudeffekter: Beskriv relevant bakgrundsljud

Testa ditt innehåll

Testning med skärmläsare

Som innehållsskapare behöver du förstå hur din text låter när den läses upp:

Testa med gratis verktyg:

Vad ska du lyssna efter:

  • Rubriköversikt: Skapar rubrikerna en logisk innehållsförteckning?
  • Länkar utan kontext: Är varje länk meningsfull när den läses separat?
  • Formulär: Är det tydligt vad varje fält ska innehålla?
  • Bilder: Beskriver alt-texten bilden meningsfullt?

Läsbarhetstest

Använd läsbarhetsmått:

  • LIX (Läsbarhetsindex): Mål under 40 för allmän publik
  • Flesch Reading Ease: Högre värde = lättare att läsa
  • Verktyg: Många ordbehandlare har inbyggda funktioner

Manuell granskning:

  • Läs högt: Upptäck krångliga formuleringar
  • Be någon annan läsa: Förstår de texten direkt?
  • Testa på riktiga användare: Personer med olika bakgrund och förmågor

Viktiga verktyg för innehållsskapare

Läsbarhet och språk

  • Hemingway Editor: Identifierar komplexa meningar och passiv röst
  • Grammarly: Grammatik, ton och tydlighet
  • Språkrådet: Svenska språkregler och rekommendationer

Kontrastverktyg

  • WebAIM Contrast Checker: Testa färgkontrast för text
  • Stark: Plugin för Figma som testar kontrast

Skärmläsartestning

  • NVDA: Gratis Windows-skärmläsare
  • JAWS: Professionell Windows-skärmläsare (kostnad)
  • VoiceOver: Inbyggd i Mac och iOS

Checklista för tillgängligt innehåll

Innan publicering – kontrollera alltid:

Språk och läsbarhet:

  • ☐ Klarspråk – korta ord och meningar
  • ☐ Aktiv röst istället för passiv
  • ☐ Direkt tilltal (du/ni)
  • ☐ LIX under 40 eller motsvarande
  • ☐ Konsekvent terminologi

Struktur:

  • ☐ Logisk rubrikstruktur (H1-H6, inga nivåer hoppas över)
  • ☐ Beskrivande rubriker
  • ☐ Listor för grupper av 3+ element
  • ☐ Korta stycken (max 3-4 meningar)

Länkar:

  • ☐ Beskrivande länktexter
  • ☐ Länkar fungerar utan kontext
  • ☐ Information om filtyp och storlek
  • ☐ Varning om nya fönster

Bilder:

  • ☐ Alt-text för informativa bilder
  • ☐ Tom alt-text för dekorativa bilder
  • ☐ Komplex information finns i text
  • ☐ Diagram har textbaserat alternativ

Formulär:

  • ☐ Tydliga etiketter för alla fält
  • ☐ Hjälptext där behövs
  • ☐ Tydliga felmeddelanden
  • ☐ Beskrivande knapptexter

Inkludering:

  • ☐ Könsneutralt språk
  • ☐ Undviker ableistiskt språk
  • ☐ Inga onödiga idiom
  • ☐ Kulturellt neutralt

Vanliga frågor för innehållsskapare

Hur enkelt måste språket vara?

Skriv för 8:e-9:e klass läsnivå för allmän publik (LIX 30-40). För specialiserad publik kan du använda facktermer, men förklara dem första gången. Målsättningen är att läsaren ska förstå direkt utan att behöva läsa om.

Kan jag använda humor och personlighet i tillgänglig text?

Absolut! Tillgänglig text behöver inte vara tråkig. Men var försiktig med sarkasm, ironi och kulturspecifik humor som kan missförstås. Använd humor som fungerar bokstavligt och är universellt förståelig. Testa alltid med olika användare.

Hur hanterar jag tekniska termer och fackspråk?

Använd tekniska termer när din målgrupp förväntar sig dem, men förklara dem första gången de dyker upp. Överväg en ordlista för specialiserade produkter. Använd konsekventa termer – byt inte mellan ”konto”, ”profil” och ”användare” för samma sak.

Vad gör jag om produktnamn eller varumärken inte följer tillgänglighetsregler?

Du kan inte ändra produktnamn, men du kan göra omgivande innehåll tydligare. Förklara akronymer i brödtext, ge kontext, och använd beskrivande rubriker. Till exempel: ”iPhone – Apples smartphone” ger mer kontext än bara ”iPhone”.

Hur skriver jag alt-text för komplexa diagram och infografik?

Använd två nivåer:

  1. Kort alt-text som sammanfattar syftet (t.ex. ”Stapeldiagram som visar försäljningstrend 2020-2024”),
  2. Detaljerad beskrivning i omgivande text eller separat sida. För mycket data, erbjud tabellformat som alternativ.

Ska jag använda emojis och symboler?

Använd sparsamt och medvetet. Skärmläsare läser upp emojis (”smilande ansikte”), vilket kan bli störande i löpande text. Använd aldrig emojis för att förmedla viktig information. Om du använder dem, placera efter text, inte före: ”Sparat ✓” istället för ”✓ Sparat”.

Hur hanterar jag innehåll på flera språk?

Märk språkbyten korrekt så skärmläsare kan byta uttal. För enstaka ord i annat språk behövs ingen markering om uttalet är lika. För hela meningar, använd språkattribut (lang=”en”). Översätt alt-texter och alla mikrokopior.

Vad är skillnaden mellan UX writing och copywriting när det gäller tillgänglighet?

UX writing fokuserar på funktionalitet och användbarhet – instruktioner, felmeddelanden, etiketter. Copywriting är mer övertalande och marknadsförande. Båda behöver vara tillgängliga, men UX writing har högre krav på tydlighet och precision eftersom det påverkar användarens förmåga att genomföra uppgifter.

Hur skriver jag för internationell publik?

Undvik idiom, kulturella referenser och talspråkligt uttryck. Använd internationellt datum- och tidsformat. Tänk på att innehållet kan översättas – skriv fullständiga meningar, inte fragment. Testa med maskininöversättning för att se hur texten håller.

Hur ofta ska jag testa med riktiga användare?

Idealt vid varje större innehållsuppdatering. Minst kvartalsvis för viktiga flöden. Inkludera alltid användare med olika funktionsnedsättningar i användartester – kognitiva, synnedsättning, hörselnedsättning och motoriska utmaningar.

Vad gör jag när designers vill ha väldigt kort text men tillgänglighet kräver mer information?

Hitta kreativa lösningar: Använd progressiv disclosure (visa mer information vid behov), tooltips för extra hjälp, eller aria-labels för skärmläsare. Men kompromissa aldrig med tydlighet i kritiska instruktioner eller felmeddelanden – där går funktion före estetik.

Hur hanterar jag automatiskt genererat innehåll och AI-texter?

AI-genererat innehåll behöver alltid granskas för tillgänglighet. AI kan skapa komplext språk, sakna alt-texter, eller använda exkluderande formuleringar. Använd AI som utgångspunkt men redigera alltid för klarhet, struktur och inkludering. Testa särskilt noga med skärmläsare.

Samarbeta med andra roller

Arbeta med designers

Tidigt samarbete:

  • Delta i designworkshops: Påverka struktur och innehållshierarki från start
  • Granska wireframes: Identifiera var text behövs och hur mycket utrymme som krävs
  • Förklara textbehov: Hjälp designers förstå varför vissa texter inte kan kortas ner

Lösningar tillsammans:

  • Progressive disclosure: Visa kort text först, expandera vid behov
  • Tooltips och popovers: Extra information för dem som behöver det
  • Aria-labels: Teknisk lösning för att ge skärmläsare mer information

Arbeta med utvecklare

Kommunicera tydligt:

  • Märk innehållstyper: ”Detta är en H2-rubrik”, ”Tom alt-text för dekorativ bild”
  • Ange aria-attribut: När standardtext inte räcker
  • Förklara prioritet: Vad är kritiskt vs nice-to-have

Granska implementation:

  • Testa med skärmläsare: Stämmer implementationen med din intention?
  • Kontrollera dynamiskt innehåll: Uppdateras text korrekt?
  • Verifiera felmeddelanden: Visas de när och där de ska?

Arbeta med produktägare

Argumentera för tillgängligt innehåll:

  • Visa business value: Tydlig text minskar supportärenden
  • Lagkrav: LPTT kräver tillgängligt innehåll
  • Användardata: Presentera resultat från användartester

Prioritera innehållsarbete:

  • Kritiska flöden först: Registrering, köp, support
  • Högfrekvent innehåll: Det som ses mest
  • Problemområden: Där användare fastnar eller klagar

Komma igång med tillgängligt innehåll

Steg 1: Utbilda dig själv (Vecka 1)

  • Läs WCAG 2.1 AA innehållsrelaterade kriterier
  • Installera och testa NVDA eller VoiceOver
  • Läs om plain language och klarspråk
  • Studera exempel på bra och dålig tillgänglig text

Steg 2: Analysera nuläge (Vecka 2-3)

  • Granska era viktigaste sidor och flöden
  • Testa med skärmläsare och identifiera problem
  • Skapa lista över vanligaste bristerna
  • Prioritera baserat på påverkan på användare

Steg 3: Skapa riktlinjer (Vecka 4)

  • Dokumentera er tone of voice med tillgänglighet i åtanke
  • Skapa mallar för vanliga texttyper (knappar, felmeddelanden, etc.)
  • Etablera process för innehållsgranskning
  • Dela riktlinjer med alla innehållsskapare

Steg 4: Implementera och förbättra (Löpande)

  • Åtgärda prioriterade innehållsproblem
  • Integrera tillgänglighet i er innehållsprocess
  • Testa regelbundet med användare
  • Uppdatera riktlinjer baserat på lärdomar

Resurser för fortsatt lärande

Böcker för innehållsskapare

  • ”Writing Is Designing” av Michael J. Metts och Andy Welfle – UX writing och tillgänglighet
  • ”Strategic Writing for UX” av Torrey Podmajersky – Innehållsstrategi för digitala produkter
  • ”Nicely Said” av Nicole Fenton och Kate Kiefer Lee – Tone of voice och innehållsstrategi

Se vår kompletta lista över böcker om digital tillgänglighet för fler rekommendationer.