Riktlinjer

Antal matchande riktlinjer: 56.

Med hjälp av filtreringsfunktionen här intill kan du välja ut de riktlinjer som är mest relevanta för dig.

Prio WCAG Nr. Riktlinje Status
1 R1 Följ WCAG 2.1 nivå AA
  • Följ den internationella standarden för tillgänglighet, Web Content Accessibility Guidelines (WCAG) 2.1 åtminstone på nivån AA.
  • Ställ krav på att utvecklingen ska utgå från WCAG 2.1 nivå AA när du beställer en ny webbplats så leverantören bygger tillgängligt från början.
1 3.3.1 (A) R2 Visa var ett fel uppstått och beskriv det tydligt
  • Sammanfatta felen och använd en layout som tydligt separerar felmeddelanden från resten av webbplatsens design.
  • Skriv välformulerade felmeddelanden så ökar chansen att användarna gör rätt från början.
  • Markera fel och felmeddelanden med WAI-ARIA så att de uppfattas tydligt av användare med hjälpmedel.
  • Spara det som inte är fel.
1 3.2.3 (AA) R29 Var konsekvent i navigation, struktur och utformning
  • Låt gränssnittselement ha samma utseende, funktionalitet och placering på hela webbplatsen.
1 2.4.5 (AA) R32 Erbjud användarna flera olika sätt att navigera
  • Erbjud flera olika navigeringsstöd på webbplatsen.
  • Utgå från användarnas behov och webbplatsens komplexitet när ni väljer navigeringsstöd.
  • Erbjud en sökfunktion.
1 R34 Gör länkar, klickbara ytor och menyer användbara för alla
  • Gör de klickbara ytorna tillräckligt stora. Det underlättar för användarna.
  • Framhäv länkarna grafiskt så att användarna förstår vad som är länkad text.
1 3.3.2 (A) R55 Skapa tydliga och klickbara fältetiketter
  • Skriv tydliga och informativa fältetiketter
  • Koppla ihop fältetikett och inmatningsfält så att även etiketten blir klickbar.
  • Placera fältetiketterna där användarna lätt ser dem.
  • Skriv utförliga instruktioner före formuläret, när sådana behövs.
  • Undvik att göra lösningen beroende av title-attribut och placeholder-texter.
1 1.4.10 (AA) R91 Skapa en flexibel layout som fungerar vid förstoring eller liten skärm
  • Undvik horisontell scrollning ner till 320 pixlars bredd.
  • Använd i första hand responsiv design.
  • Gör en anpassad mobilversion om responsiv design är inte är möjligt.
  • Även dokument som inte är webbsidor bör kunna presenteras i begränsad bredd.
1 2.4.1 (A) R75 Erbjud möjlighet att hoppa förbi återkommande innehåll
  • 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.
  • R68. Skapa snabbkommandon vid behov.
1 2.1.4 (A) R68 Skapa kortkommandon med varsamhet
  • Använd kortkommandon sparsamt.
  • Använd vedertagna tangentkombinationer om sådana finns.
  • Informera om vilka kortkommandon ni erbjuder.
  • Gör det möjligt att stänga av eller byta ut kortkommandon som bara består av ett tecken.
1 R111 Anpassa webbplatsen även för små skärmar
  • Visa det viktigaste innehållet tidigt.
  • Anpassa innehållet till små skärmar.
  • Anpassa funktionaliteten till små skärmar.
  • Se till att tjänsten går att zooma.
  • Använd inte ramar.
  • Gör det enkelt att skapa bokmärke/genväg till webbplatsen.
1 1.4.3 (AA) R126 Använd tillräcklig kontrast mellan text och bakgrund
  • Lita inte på automatisk granskning av kontraster
  • Överträffa gärna gränsvärdena för kontrast
  • Överväg att låta användaren välja kontraster
1 2.1.1 (A) R129 Utveckla systemet så att det går att hantera med enbart tangentbordet
Testa alla webbplatser och applikationer utan mus och utan pekskärm.
1 2.4.7 (AA) R140 Markera tydligt vilket fält eller element som är i fokus
Använd CSS för att tydligt visa vilket element som är i fokus.
1 3.3.4 (AA) R150 Ge möjlighet att ångra, korrigera eller bekräfta vid viktiga transaktioner
Erbjud användarna minst en, men gärna fler, av följande skyddsåtgärder:
  • Möjlighet att ångra sin åtgärd.
  • Möjlighet att rätta till möjliga fel som systemet identifierat.
  • Möjlighet att förhandsgranska sina uppgifter och rätta eventuella fel innan åtgärden slutligen bekräftas.
1 1.4.2 (A) R125 Ge användaren möjlighet att pausa, stänga av eller sänka ljud
  • I de flesta fall är det lämpligt att undvika att spela ljud automatiskt.
  • I andra hand kan det vara lämpligt att erbjuda en pausfunktion i början av sidan.
1 1.3.2 (A) R122 Presentera innehållet i en meningsfull ordning för alla
  • 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 och testa även att läsordningen är logisk i dokument som inte är html (pdf, word med mera) .
1 1.4.1 (A) R124 Använd inte enbart färg för att förmedla information
Komplettera färgskillnader:
  • i text med understrykning, ram, fetstil, kursivering eller annat teckensnitt.
  • med ikoner.
  • med mönster i diagram och kartor för att särskilja ytmarkeringar.
  • med beskrivning i text.
  • med semantisk kodning.
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.
1 1.3.3 (A) R123 Gör inte instruktioner beroende av sensoriska kännetecken
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.
1 3.2.4 (AA) R146 Benämn funktioner konsekvent
  • 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.
1 3.2.2 (A) R144 Utför inga oväntade förändringar vid inmatning
  • Utför bara förändringar (till exempel öppning av fönster eller förändring av värde) när användaren har anledning att förvänta sig dem.
1 3.2.1 (A) R143 Utför inga oväntade förändringar vid fokusering
  • Utför bara förändringar (till exempel öppning av fönster eller förändring av värde) när användaren förväntar sig dem.
1 1.4.5 (AA) R128 Använd text, inte bilder, för att visa text
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.
1 2.4.3 (A) R136 Gör en logisk tab-ordning
  • Kontrollera ordningen utan pekdon.
  • Säkerställ en logisk ordning med tabindex.
1 2.3.1 (A) R133 Orsaka inte epileptiska anfall genom blinkande
Maximalt tre växlingar från ljus till mörk eller tvärtom inom en sekund är acceptabelt.
1 1.3.5 (AA) R154 Märk upp vanliga formulärfält i koden
  • Använd attributet autocomplete på inmatningsfält.
  • Beskriv förväntat innehåll med attributet autocomplete, om det finns en standardiserad benämning.
  • Ange autocomplete=”off” om det gäller känslig information eller om servern erbjuder ordförslag.
1 1.4.11 (AA) R156 Använd tillräckliga kontraster i komponenter och grafik
  • Ge gränssnittskomponenter tydliga visuella gränser.
  • Gör helst även inaktiva element urskiljbara för alla.
  • Använd god kontrast för informationsbärande delar av illustrationer och annat grafiskt innehåll, så långt det är rimligt.
1 1.4.12 (AA) R157 Se till att det går att öka avstånd mellan tecken, rader, stycken och ord
  • Placera text i utrymmen som är tillräckligt stora eller som anpassar sig efter innehållet.
  • Ta hänsyn till att texter kan ändra storlek om du använder absolut positionering av element som riskerar att krocka med texten.
1 1.4.13 (AA) R158 Popup-funktioner ska kunna hanteras och stängas av alla
  • Överväg att presentera innehållet på något annat sätt.
  • Gör det enkelt att ta bort innehållet.
  • Gör det möjligt att hantera innehållet för alla.
1 2.5.1 (A) R160 Erbjud alternativ till komplexa fingerrörelser
  • Se till att all funktionalitet går att utföra med flera fingrar även går att utföra med bara ett finger
1 2.5.2 (A) R161 Gör det möjligt att ångra klick
  • Ge i första hand användaren möjlighet att ångra åtgärden innan nedtryckningen upphör (up-eventet).
  • Ge i andra hand användaren möjlighet att ångra sig efter up-eventet.
  • Koppla bara i undantagsfall aktivering till nedtryckning av knappen eller skärmen (down-eventet).
1 2.5.3 (A) R162 Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter
  • Ta reda på vilken maskinläsbar etikett som används för kontrollen.
  • Se till att den maskinläsbara etiketten matchar den synliga.
  • Använd bara samma maskinläsbara etikett för flera kontroller om de gör exakt samma sak.
1 2.5.4 (A) R163 Erbjud alternativ till rörelsestyrning
  • Se till att funktioner som kan hanteras med rörelsestyrning även kan hanteras på något annat sätt.
  • Gör det möjligt att stänga av rörelsestyrningen.
1 4.1.3 (AA) R164 Se till att hjälpmedel kan presentera meddelanden som inte är i fokus
  • Markera med aria-kod de områden där statusmeddelanden kan presenteras.
  • Använd gärna samma teknik även för andra viktiga förändringar.
  • Använd aria med försiktighet så att du inte stör användaren.
1 1.3.4 (AA) R153 Se till att allt innehåll presenteras rätt oavsett skärmens riktning
  • Använd bara i undantagsfall de tekniker som finns för att låsa skärmens riktning (exempelvis Screen Orientation API).
  • Se till att allt innehåll presenteras oavsett skärmens riktning.
2 R23 Ange när webbsidorna har publicerats eller uppdaterats
  • 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.
2 R39 Ge webbplatsen en god läsbarhet
  • Välj ett läsvänligt typsnitt och ange det i stilmallen.
  • Undvik helt versala rubriker och texter.
  • Anpassa radavståndet.
  • Vänsterjustera löptext och menyer.
  • Ange maximal spaltbredd och anpassa radlängden.
2 R60 Gör tydliga användbara knappar
  • Namnge knappar så att användarna förstår vad som händer när de klickar på dem.
  • Ge knapparna en logisk och användbar placering.
  • Använd lagom många knappar.
  • Presentera inte knappens text enbart som bild.
2 R77 Ge tydlig återkoppling i e-tjänster
  • Välj lämpliga kanaler för att meddela användarna att status i ett ärende har ändrats.
  • Användarna ska kunna granska sina uppgifter och få en kvittens. Kvittensen bör kompletteras med ett e-brev.
  • Användarna ska få ett mottagningsbevis från den organisationen som fått deras uppgifter.
2 R88 Publicera i första hand dokument i html och skapa tillgängliga pdf:er
  • Publicera i första hand 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.
3 R17 Anpassa webbplatsen för flerspråkighet
  • 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.
3 R27 Visa tydligt var användaren befinner sig
  • Låt menyer och navigation ange var användaren befinner sig.
  • Underlätta navigeringen med länkstigar.
3 R28 Gör det lätt att hitta det viktigaste
  • 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.
3 R50 Minimera antalet fält i formulär
  • Minimera antal fält i formulären genom att slå ihop flera fält till ett, till exempel för- och efternamn eller gatunamn och nummer.
  • Gör det så tydligt som möjligt vilka fält som är obligatoriska. Gruppera dem gärna, så att användarna sedan enkelt kan hoppa över frivilliga fält.
Ett annat upplägg är att först bara visa de obligatoriska fälten. När användaren har fyllt i dem visas de frivilliga fälten.
3 R53 Gruppera formulärets fält
  • 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.)
3 R62 Gör texterna överskådliga
  • 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.
3 R63 Visa var i en process användaren befinner sig
  • Visa och beskriv för användarna var de befinner sig i processen.
  • Använd tydliga bilder och pilar, till exempel en så kallad processfisk, så att användarna får en överblick av processen.
3 R93 Använd Javascript för att öka tillgängligheten – inte tvärtom
  • 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.
3 R97 Se till att bakåtknappen fungerar
  • Låt bakåtknappen fungera (se undantag nedan).
  • 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.
3 R101 Markera obligatoriska fält i formulär
  • 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.
3 R106 Stryk aldrig under text som inte är länkad
  • Stryk aldrig under text som inte är länkad, eftersom det kan leda användarna att felaktigt tro att texten är en länk.
3 R112 Ge ordförslag vid sökning och inmatning
  • Ge dynamiska ordförslag i sök- och inmatningsfält
  • Ge förslag på alternativa sökord och stavningar efter sökning
  • Ge statiska ordförslag på rätt sätt
4 R31 Länka alla sidor till startsidan
  • 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.
4 R52 Fyll formulär med kända uppgifter
  • Ö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.
4 R58 Använd standardutseendet på formulärens element
  • Låt formulärelementen behålla standardutseendet.
  • Gör användningstester för att kontrollera att formulären fungerar, om ni trots allt ändrar utseendet.
  • Anpassa storleken på textfält till förväntat innehåll.
4 R66 Skriv datum och andra siffreruppgifter konsekvent
  • 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.
  • Ange alltid årtal.
4 R70 Skydda användaren mot att oavsiktligt förlora påbörjat arbete
  • Låt om möjligt användaren själv avgöra när information som redigerats eller matats in i ett formulär ska överges.
Exportera urval som csv

Visa som kompakt lista

Prioriteringsordning Wcag-nivå Wcag-nummer Nummerordning Bokstavsordning Senast ändrad