Webbriktlinjer.se genomgår justeringar under 2023 och därför kan innehållet på webbplatsen vara inaktuellt. De tillgänglighetskrav som finns för digital offentlig service finns i standarden EN 301 549 V3.2.1, som hänvisar till Web Content Web Accessibility Guidelines 2.1 (WCAG 2.1).
Anpassa textens språk och innehåll till målgruppens behov.
Skriv tydliga sammanfattningar av innehållet.
Förklara ord och uttryck som inte är självklart begripliga för alla, inom parentes direkt efter ordet eller, om det rör många uttryck, i en separat ordlista.
Förklara ord och uttryck som är centrala för er verksamhet, och samla dem i en ordlista. Myndigheter har till och med skyldighet att utveckla och tillgängliggöra svenska termer för sitt verksamhetsområde enligt § 12 i språklagen.
Gör en hänvisning till mer aktuell information om det finns.
Använd inte enbart bild eller färg för att förmedla att informationen inaktuell. Det måste vara tydligt även i texten. Placera informationen tidigt i materialet och högt upp på sidan.
Säkerställ att er webbserver och ert publiceringsverktyg är korrekt konfigurerade så att de levererar rätt cache-instruktioner, för att minska risken att inaktuella versioner presenteras för användare. Se R54. Optimera webbplatsen för bästa prestanda.
Låt användarna själva välja om de vill få upp träffar även på inaktuellt material när de söker efter något på webbplatsen. Informera direkt i sökresultatet om någon träffpost är inaktuell.
Validera koden vid förändringar, se R84. Se till att koden validerar.
För presentation och layout med stilmallar, använd CSS. Se R82. Separera innehåll från design – använd externa stilmallar för att styra presentation och layout.
För prenumerationstjänster, använd RSS eller Atom. Se R87. Gör det möjligt att prenumerera på information.
Kontrollera att era mallar för funktioner, tjänster och stilmallar validerar i enlighet med er valda standard.
Kräv att leverantören vid leverans bifogar valideringsprotokoll för samtliga mallar. Mallar som inte validerar bör inte godkännas för leverans, om inte leverantören har acceptabla argument för alla valideringsfel.
Försök att automatisera en regelbunden kodvalidering, eller gör validering till en rutinåtgärd vid all förändring av webbplatsens kod. Det är lätt hänt att tidigare korrekt kod går sönder. Det kan till exempel hända när ni uppdaterar ett tilläggsprogram, när ni infogar en videospelare i ett blogginlägg eller när någon gör ett inlägg i ett kommentarssystem.
Skapa genvägar för att hoppa över delar i strukturen till exempel menyn, för att komma direkt till sidans innehåll.
Skapa rubriker med h-element, eftersom skärmläsare låter användarna snabbnavigera med hjälp av sidans rubriker.
Använd WAI-ARIA landmark roles, till exempel main, search, navigation, banner, contentinfo och så vidare. Det gör att användare med exempelvis skärmläsare kan navigera mellan sidans olika delar på ett standardiserat sätt.
Om du använder HTML5, använd strukturelement som main, aside, header, footer och nav för att definiera vilken roll varje del av sidan har.
Testa läsordningen genom att granska en sida av varje sidtyp med några skärmar i olika storlek och genom att lyssna igenom innehållet med en skärmläsare.
Se till att webbplatsen kan användas även utan stilmallar. Vissa webbläsare och tilläggsprogram har funktioner för att avaktivera CSS.
Se till och testa även att läsordningen är logisk i dokument som inte är html (pdf, word med mera) .
Komplettera betydelsebärande färgskillnader med någon annan synlig skillnad:
Ikoner eller liknande grafiska element kan ibland passa som komplement till färgskillnader.
Färgskillnader mellan textelement kan kompletteras med understrykning, ram, fetstil, kursivering eller annat teckensnitt. Var särskilt noga med att framhäva länkar.
Färgskillnad mellan ytor i bland annat kartor och diagram kan kompletteras exempelvis med mönster, inramning, kontrastskillnad eller text.
Linjer kan exempelvis göras streckade, prickade, prickstreckade eller dubbeldragna.
Ibland behöver färgskillnader kompletteras med skriven text som ger motsvarande information.
Semantisk kodning är ofta ett bra men otillräckligt komplement: Skärmläsare presenterar ofta den semantiska informationen, men det är inte alla användare som har skärmläsare.
Var särskilt försiktig med färgerna grön, röd och brun. Många personer med färgblindhet har svårt att särskilja dessa.
Använd gärna sensoriska kännetecken (färg, form med mera) för instruktioner eftersom det kan vara en effektiv metod för att underlätta för användarna, inklusive personer med kognitiva begränsningar men kom ihåg att komplettera informationen så att alla kan förstå den.
Observera att den som uppfyller R120 Syntolka videoinspelningar (som i WCAG 2.1 motsvaras av ett kriterium med den högre ambitionsnivån AA) även uppfyller den här riktlinjen, eftersom syntolkning är ett av alternativen på A-nivå.
Använd samma termer för återkommande funktioner såsom knappar och ikoner, eftersom vissa användare saknar till exempel layout och formgivning som annars kan användas för orientering.
Använd i första hand standardkomponenter som finns i html. Då uppfyller du automatiskt detta krav. Bara när det finns starka skäl och tillräckliga resurser för test och utveckling bör skräddarsydda komponenter utvecklas.
Vid val av tilläggsprogram eller kodplattformar (till exempel olika javascript-bibliotek) behöver ni undersöka om eventuella komponenter som bygger på dessa plattformar har ett bra stöd för tillgänglighet.
När bilder trots allt behöver innehålla text kan denna ofta göras tillgänglig för alla genom att:
Använda CSS för att placera text i bilden, istället för att ha texten avbildad.
Generera bilden dynamiskt med hänsyn till användarens preferenser för teckensnitt, storlek och förgrund- eller bakgrund. Observera att detta kan kräva en del programmering och att sidan kan behöva innehålla kontroller för att ställa in sådana preferenser. Komplettera med en alt-text.
Skriv alt-text till knappar, logotyper, skärmdumpar och diagram som förmedlar samma information som bilden.
En bild av ett handskrivet brev kan ha antingen en alt-text som återger innehållet eller en kompletterande text med samma funktion.
För vissa användare och i vissa sammanhang behövs gott om tid för att använda digitala tjänster. Ge därför användare möjlighet att stänga av, anpassa eller utöka eventuella tidsbegränsningar, om det inte är orimligt för att uppnå sajtens syfte.
Använd en krypterad anslutning, https, till alla e-tjänster som innehåller inloggningsinformation eller personliga eller ekonomiska uppgifter.
Skicka inloggningsinformation över en krypterad kanal.
Överväg om hela webbplatsen bör kunna användas över en krypterad anslutning.
Använd ett certifikat från en certifikatutfärdare som förekommer i de vanligaste webbläsarna. Annars kan användarna få ett felmeddelande om att utfärdaren inte är betrodd.
Se till att era certifikat är giltiga så att användarna slipper felmeddelanden och varningar.
Se till att alla webbplatsens resurser kan laddas över en krypterad kanal, även om de inkluderas från en tredje part. Annars kan användaren få felmeddelanden och varningar.
Omdirigera användare till den krypterade kanalen om de försöker nå en sida över en okrypterad kanal.
Skriv gärna länkar till externa webbplatser med https:// om webbplatsen har stöd för det. Det gör att användarna hamnar rätt från början.
Informera om vilka delar av webbplatsen som använder kakor (Lag (2022:482) om elektronisk kommunikation).
Se till att få besökarens samtycke till att du använder kakor.
Följ dataskyddsregleringen.
Informera också om
hur elektroniska anslagstavlor används, till exempel chatt eller diskussionsforum (Lag (1998:112) om ansvar för elektronisk kommunikation).
myndigheten har utgivningsbevis, ger ut periodiska skrifter eller radioprogram.
vilka bestämmelser som är tillämpliga på verksamheten, om besökaren kan sluta avtal, eller beställa varor eller tjänster på webbplatsen. (lag 2002:562) om elektronisk handel och andra informationssamhällets tjänster.
Ange datumet för när informationen på en sida publicerades eller senast uppdaterades eller granskades.
Bedöm om det finns andra datum som är relevanta att ange, till exempel datum då ett nytt regelverk började gälla. Ange tydligt om ett datum gäller något annat än publicerings- eller uppdateringsdatum.
Ange även klockslag på sidor som uppdateras löpande eller där spårbarheten är viktig, till exempel sidor med krisinformation.
De flesta webbpubliceringsverktyg har inbyggda funktioner för att automatiskt visa tidpunkten för publiceringen på webbsidan.
Skapa rutiner för hur innehållet ska granskas och uppdateras med jämna mellanrum. De flesta webbpubliceringsverktyg har inbyggda funktioner för att påminna om när det är dags att granska en sida.
Skapa rutiner för att granska och uppdatera sidor på lättläst svenska, nationella minoritetsspråk och på andra språk. Det gäller också teckenspråksfilmer eller annan information i form av ljud, bild och film. Dessa sidor kan utformas så att de får längre hållbarhet än övriga texter, som kanske uppdateras oftare. Vissa webbpubliceringsverktyg har funktioner för att hantera flerspråkig information parallellt vilket underlättar uppdateringen av sidor på olika språk.
Se till att borttagna sidor genererar en korrekt svarskod, det vill säga 404 (Not found), så att sökmotorerna tar bort dem ur sökresultatet.
Skriv korta raka meningar, där det viktigaste verbet kommer tidigt. Undvik långa och invecklade meningar och långa, informationstäta fraser.
Välj aktiva verbfraser med tydliga subjekt. Skriv hellre ”miljöförvaltningen behandlar 200 anmälningar per år” än ”200 anmälningar per år behandlas”.
Använd ett personligt tilltal. Använd verb med uppmaningsform, eller ”du”.
Välj vanliga, välkända och entydiga ord och formuleringar.
Var konkret, undvik bildspråk.
Använd förtydligande sambandsord, till exempel eftersom, men, därför och alltså.
Använd de facktermer som era läsare behöver, och förklara vad termerna betyder. Gör gärna en separat ordlista intill texten om ni har både kunniga och nya läsare.
Använd svenska termer. Myndigheter är enligt § 12 i språklagen skyldiga att utveckla och tillgängliggöra svenska termer för sitt verksamhetsområde.
Skriv ut förkortningar. De stör läsningen. Förkortningar kan dessutom vara svåra att tolka för skärmläsare och andra talsyntestjänster.
Låt alltid någon annan ge återkoppling på texten före publicering.
Samla regler för webbplatsens utseende i stilmallar.
Definiera stilmallarna i externa stilmallsdokument, i så stor utsträckning som möjligt. Använd inte style-attributet för att definiera stilmallar direkt i HTML-koden, eftersom ni då blandar uppmärkning för semantik och presentation, vilket kan leda till problem för vissa användare och i vissa webbläsare.
Använd insticksbaserade multimediala format när det är motiverat, men ge bra alternativ. Undersök först om det går att använda mer tillgängliga format.
Använd inte insticksbaserade format för grundläggande funktioner som navigering eller formulär.
Analysera vad som händer om det saknas stöd för formatet.
Ta hänsyn till att insticksbaserade format kan ta lång tid att ladda vid låg bandbredd.
Om ni använder script för att kontrollera om era användare använder insticksbaserade format, så se till att scriptet inte ger fel besked om en användare har script avslaget.
Infoga det format ni använder i webbsidan på ett sätt som fungerar i så många webbläsare som möjligt.
Publicera dokument i standardformatet html. Då kan användarna komma åt er information utan att använda en viss datorplattform, eller ett program som kostar pengar, till exempel Word.
Om ni har dokument i andra format än html, sammanfatta dem i html, så att användarna kan bedöma innehållet utan att ladda ner det.
Utforma dokument så att de enkelt kan läsas på skärm. Då bidrar ni till att färre användare skriver ut på papper.
Om ni använder pdf:er, se till att de skapas så att de blir tillgängliga.
Utforma alla texter på webbplatsen så att de är begripliga för så många som möjligt i den tänkta målgruppen. Se riktlinje 10, Ge all information på begriplig svenska.
Klargör genom en målgruppsanalys om det finns personer med särskilda behov av lättlästa texter och hur ni bäst anpassar texterna för att nå dem. Personer som har lässvårigheter eller är otränade läsare behöver särskilt lättlästa texter, som är enkla och väl strukturerade.
Gör delar av webbplatsen tillgänglig på lättläst svenska om målgruppsanalysen visat att det finns behov av det.
Gör webbplatsens mest besökta sidor tillgängliga i lättläst form, om det finns behov av det.
Markera tydligt de delar av webbplatsen som finns på lättläst svenska och länka till sidans motsvarande sida på lättläst.
Tänk att hålla informationen på de lättlästa sidorna uppdaterad.
För myndigheter gäller att ge åtminstone följande information på lättläst svenska:
En kort beskrivning av vad organisationen gör.
Information av centralt samhällsintresse, till exempel vilka rättigheter och skyldigheter man som medborgare har inom ert verksamhetsområde.
Se till att publiceringsverktyget har stöd för att hantera flera språk och teckenuppsättningar på ett korrekt, enkelt och effektivt sätt. Valet av publiceringsverktyg kan sätta gränser för vad som är möjligt att göra i ett flerspråkigt perspektiv.
Översätt grundläggande navigeringselement som sök och kontakt om ni har omfattande avdelningar på olika språk.
Ange aktuellt språk i html-kod och kontrollera att den automatiska textuppläsningen fungerar också för andra språk än svenska.
Ange språkriktning för innehåll som läses från höger till vänster.
Låt en person som behärskar det aktuella språket läsa igenom sidan och komma med synpunkter.
Avsätt resurser för att hålla en hög och god kvalitet på förvaltningen av webbplatsen. De som ska förvalta webbplatsen behöver ha rätt kunskap och kompetens redaktionellt, pedagogiskt och tekniskt.
Ta fram en uppdateringsplan där ansvaret är tydligt fördelat.
Ta reda på vad på webbplatsen som är viktigast för användarna, och vilka frågor de vill ha svar på. Lägg ingångar till detta redan på startsidan.
Skapa en informationsstruktur som utgår från användarnas önskemål, behov och processer genom att gruppera innehållet på ett sätt som är logiskt för användarna. Använd ord som besökarna är bekanta med i menyer, länkar och rubriker.
Erbjud mer än ett sätt att hitta information och navigera på webbplatsen. Gör det enkelt att växla mellan de olika sätten. Se mer i R32. Erbjud besökaren alternativa orienteringsstöd.
Tänk igenom vilka beroenden som finns mellan uppgifterna som ska fyllas i. Placera fält med uppgifter som användaren har nytta av när han eller hon fyller i andra fält på samma sida. Även ska information som krävs för att kunna fatta ett beslut finnas på samma sida samt uppgifter som styr övrig information som ska fyllas i.
Dela upp formuläret på flera sidor om det är omfattande och innehåller många fält som användaren ska fylla i.
Visa vilket steg användaren befinner sig på samt hur många steg som återstår när formuläret sträcker sig över flera sidor, till exempel ”Steg 1 av 3: Dina kontaktuppgifter”. (Se även R63. Hjälp användaren att förstå var hon befinner sig i en process.)
Låt det som hör ihop stå i ett stycke, som ett resonemang, en tanke eller en sakfråga. Stycken kan variera i längd, men tre till tio meningar är vanligt. Använd alltid blankrad som styckemarkör för webbtexter.
Inled stycket med det viktigaste.
Låt gärna den första meningen sammanfatta stycket och utveckla sedan resonemanget med förklaringar och exemplifieringar.
Använd gärna bilder, kant- och mellanrubriker, punktlistor och andra grafiska medel för att skapa en luftig och lättöverskådlig struktur på varje sida. Var dock konsekvent i användandet av sådana medel, liksom i användningen av färger, typsnitt med mera.
Skriv informationstäta uppräkningar i punktlisteform. Placera de viktigaste listpunkterna först.
I längre texter kan fetade nyckelord underlätta läsningen.
Kräv identifiering i e-tjänster som visar integritetskänslig information.
Visa ärendets uppgifter sammanställda i slutet av e-tjänstflödet, så att användarna kan kontrollera att uppgifterna är korrekta.
Var tydlig med att när användaren ”signerar” sitt ärende med sin e-legitimation har signeringen samma juridiska status som en signatur med namnteckning.
Använd till exempel ”ansök om...” istället för ”e-tjänst för...” när du bestämmer namn på din e-tjänst.
Blanketter och e-tjänster fyller samma behov för användarna, och bör därför finnas på samma ställe, behandlas parallellt i informationsmaterial och så vidare.
Utred möjligheterna för, och era användares behov av, syndikering. Gå igenom webbplatsen, och välj ut och gruppera material som kan vara värdefullt att syndikera.
Presentera syndikerat material på er webbplats, om era användare kan ha nytta av att ni sammanställer er information med information även från andra webbplatser.
Följ PSI-lagen – ett krav för myndigheter, en rekommendation till alla.
Använd gärna Javascript, men se till att även de som inte använder Javascript kan använda de viktigaste funktionerna. Följ principen om progressiv förbättring, det vill säga bygg först all funktionalitet som vanlig html. Använd sedan Javascript som ett förhöjande tillägg.
Se upp så att Javascript inte gör webbplatsen otillgänglig. Denna riktlinje ger flera råd som du bör tänka på om du använder Javascript.
I undantagsfall kan faktorer utanför din kontroll göra att besökare måste använda Javascript. Upplys då användaren om att Javascript krävs för att använda tjänsten.
Om vissa användare utestängs på grund av att de saknar Javascript kan ni eventuellt ha skyldighet att erbjuda fullgoda alternativ. Detta gäller särskilt myndigheter.
Se till att adressen i webbläsarens adressfält alltid leder tillbaka till aktuell sida.
På dynamiskt skapade webbsidor är det inte alltid möjligt att komma tillbaka till precis samma innehåll med hjälp av adressen. Låt då den adress som visas i adressfältet, och som används för eventuellt bokmärke, leda till den närmaste lämpliga beständiga delen av webbplatsen.
Undvik att öppna nya fönster, särskilt fönster som täcker hela skärmen; då fungerar inte bakåtknappen.
Ställ krav på att bakåtknappen ska fungera, när ni upphandlar system, eller tidigt under utvecklingsprocessen. Hur och om bakåtknappen fungerar kan nämligen bero på den grundläggande tekniken.
Använd en bild av en asterisk (*) för att markera ett obligatoriskt fält i ett formulär. Den ska placeras före inmatningsfältet, i label-elementet. Låt bilden ha textekvivalenten alt=”obligatoriskt”.
Informera användarna före formuläret genom att skriva till exempel ”Fält markerade med * är obligatoriska och måste fyllas i”.
Använd den uppmärkning av obligatoriska fält som fungerar med den html-version du valt.
Se till att översatta texter håller god kvalitet och följer språklagens krav på vårdat, enkelt och begripligt språk.
Anpassa texterna till målgruppen innan de översätts, både vad gäller språknivå och innehåll.
Anlita professionella översättare och tänk på att även beställa sättning och ombrytning till din layout, om du behöver översättning till ett språk du inte kan läsa alls. Du kan även beställa språkgranskning av översättningarna.
Samarbeta med andra och utnyttja gemensamma översatta källtexter. Det spar tid och pengar. Andra organisationer kan redan ha översatt motsvarande text, som ni kanske kan återanvända eller länka till.
Låt gärna rubriker på webben, blanketter och liknande stå både på svenska och på det främmande språket. Det underlättar för den svenskspråkig personal som ska hjälpa personer med annat modersmål.
Se till att alla sidor har länkar till startsidan och andra sidor som är viktiga för orienteringen. Det kan vara webbkartan, ”Om webbplatsen”, sökfunktionen och information på andra språk.
Placera länkarna i sidhuvudet och/eller i sidfoten.
Länka webbplatsens eller organisationens logotyp till webbplatsen startsida. Om logotypen är en bild, ange i alt-texten att länken går till startsidan.
Besvara dessa frågor innan ni publicerar diariet på webbplatsen:
Hur ska sekretessbelagd information döljas vid webbpublicering?
I vilken utsträckning bör information om till exempel handläggares namn finnas i diariet?
Hur lång tid bakåt i tiden ska informationen i diariet vara tillgänglig?
Hur ska informationen och sökmöjligheterna i diariet utformas så att de blir begripliga för användarna, utan att hindra organisationens interna arbete?
Överväg att automatiskt fylla i uppgifter i formulär. Det kan ske om en användare redan tidigare har lämnat uppgifter till er, eller om uppgifterna kan hämtas från annat håll.
Ta hänsyn till riskerna med färdigifyllda uppgifter.
Ge användarna möjlighet att ta bort eller ändra uppgifterna själv i formuläret eller gör det enkelt för dem att ta kontakt med er för att påpeka om uppgifterna är inaktuella eller felaktiga.
Använd publiceringsverktyg och applikationer som tillåter de datumformat som är standard i Sverige: ”(den) 13 december 2013”, ”2013-12-13” eller ”13.12.2013”.
Var lagom exakt, avrunda tal för till exempel filstorlekar och klockslag.
Beskriv vid tjänstens ingång vad användaren måste ha tillgång till för att kunna slutföra tjänsten.
Ge möjlighet att titta igenom hela tjänsten utan att logga in, och utan att få varningar för att obligatoriska fält inte är ifyllda. Gärna via en speciell ingång, där det inte är möjligt att fylla i uppgifter. Detta minskar risken för att användaren ändå börjar fylla i formuläret men inte kan slutföra transaktionen.
Använd tabellrubriker såsom rad- och kolumnrubriker, och framhäv dem grafiskt.
Använd vid behov abbr-attributet för att ge förkortningar av rad- och kolumnrubrikers innehåll.
Koppla ihop rubrikceller med tillhörande dataceller. Detta gäller särskilt för komplexa datatabeller som har två eller flera logiska nivåer med rad- eller kolumnrubriker.
Markera telefonnummer i koden som telefonlänkar (tel:). Det ger möjlighet att direkt ringa upp numret, på samma sätt som e-postlänkar (mailto:) ger möjlighet att skicka e-post.
Ange det fullständiga telefonnumret, inklusive det internationella prefixet, i länken – även om det nummer som visas på sidan bara innehåller den lokala delen. Då fungerar länken oavsett varifrån användaren ringer.
Överväg att använda strukturerade data även när telefonnummer inte är länkade.
Utnyttja webbläsarens inbyggda funktion för utskrift av innehållssidor på webbplatsen och använd en stilmall för det.
Tillhandahåll en utskriftsikon eller liknande om målgruppen saknar kunskap om webbläsarens inbyggda utskriftsfunktion och kortkommandon som Ctrl+P.
Knappar, symboler och liknande för att skriva ut kräver JavaScript för att fungera. Låt även knapparna och symbolerna skapas av skriptet. Då kommer användare som inte har JavaScript påslaget inte att se knappen eller symbolen, och får då inte heller en trasig ikon.
För utskrift av beräkningar, kvittenser, mottagningsbevis och liknande kan det vara motiverat att tillhandahålla en särskilt utskriftsversion.
Använd stilmallen för att ta bort menyer och understrykningar samt styra teckensnitt och sidlayout.
Erbjud möjligheten att slå samman sidor till en utskrift.