Riktlinjer

Antal matchande riktlinjer: 33.

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 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 2.4.4 (A) R5 Skriv tydliga länkar
  • Formulera länktext med omsorg. Användaren måste kunna förutse vad som händer vid klick på länken.
  • Låt sammanhanget och syftet med länken avgöra om den exempelvis ska placeras i brödtexten eller utanför.
  • Utforma länkar till dokument och länkar till e-post så att användaren får rätt förväntningar.
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 2.4.6 (AA) R61 Skriv beskrivande rubriker och etiketter
  • Använd nyckelord ur texten.
  • Skriv de viktigaste orden först.
  • Använd aktivt språk, gärna verb.
  • Gör inte rubrikerna längre än 5-10 ord.
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 1.2.2 (A) R117 Texta inspelad rörlig media (video, ljud, animationer…)
  • Erbjud stängda undertexter för digital video
  • Informera användaren om att det finns text
  • Beskriv alla ljud av betydelse
  • Erbjud gärna en separat textversion
1 R114 Grundläggande rekommendationer för appar
  • Komplettera med appar när webben inte räcker till
  • Följ de webbriktlinjer som är tillämpbara även i appar
  • Följ respektive plattforms egna riktlinjer för tillgänglighet
1 1.1.1 (A) R115 Beskriv med text allt innehåll som inte är text
  • Välj detaljnivå efter användarens behov
  • Undvik upprepningar genom att provlyssna
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 1.2.5 (AA) R120 Syntolka videoinspelningar
  • Följ riktlinjer för syntolkning
  • Informera användare om att det finns en syntolkad version
1 1.3.1 (A) R121 Ange i kod vad sidans olika delar har för roll
  • R105. Skapa rubriker med h-element
  • R104. Använd rätt html-element när ni gör listor
  • Namnge formulärfält med kopplade label-element. Se R55. Skapa tydliga och klickbara fältetiketter.
  • R98. Skriv rubriker till tabeller
  • R101. Markera obligatoriska fält i formulär
  • Betona innehåll med elementet em och inte bara kursivering, eftersom det inte går att kursivera skärmläsarens tal.
  • Använd WAI-ARIA för sådant som inte går att uttrycka med vanlig html.
1 4.1.2 (A) R152 Se till att skräddarsydda komponenter fungerar i hjälpmedel
  • 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.
1 3.1.2 (AA) R142 Ange språkförändringar i koden
Ange aktuellt språk med lang-attribut på omslutande element när språket i elementet är ett annat än sidans huvudspråk.
1 3.1.1 (A) R141 Ange sidans språk i koden
  • Ange huvudspråk med hjälp av lang-attribut på sidans rot-element.
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.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 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.
2 R11 Kombinera skrift med ljud, bild och film
  • Visa gärna informationsstödjande bilder och filmer på webbplatsen.
  • Se till att det går att lyssna på innehållet
  • Tänk på att hålla information i ljud, bild och film uppdaterad.
2 R14 Ge information på de nationella minoritetsspråken
  • Ge grundläggande information på alla nationella minoritetsspråk. Detta är en lagstadgad skyldighet för myndigheter.
  • Ge viktig information och service på finska, meänkieli och samiska till nationella minoriteter inom förvaltningsområdena.
  • Välj vad som ska översättas i samråd med berörda grupper.
2 R64 Skriv lättbegripliga texter
  • 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.
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.
2 R113 Använd webbvideo för att öka tillgängligheten
  • Använd gärna video.
  • Använd undertexter.
  • Erbjud syntolkning eller se till att viktig information framgår av ordinarie ljud.
  • Erbjud översättningar (till exempel till svenskt teckenspråk) vid behov.
  • Använd videospelare med bra tillgänglighet.
  • Begränsa blinkande för att inte orsaka krampanfall.
  • Ställ krav på tillgänglighet när ni upphandlar videoproduktion.
  • Planera produktionen med hänsyn till tillgänglighet.
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 R94 Använd inte ramar
  • Använd i första hand serverbaserade tekniker.
  • Komplettera eventuellt med klientscript (Ajax).
  • Undvik iframes, eller kompensera för nackdelarna.
  • Använd inte ramar (frames).
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 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 R15 Ge information på engelska och andra språk
  • Välj språk utifrån tillgänglig språkstatistik och en målgruppsanalys.
  • Välj vad som behöver översättas utifrån ert uppdrag och vad målgrupperna antas vilja göra på webbplatsen.
  • Översätt inte bara texten utan anpassa även innehållet.
4 R83 Använd inte tabeller för layout
  • Använd inte tabeller för layout. Det finns i regel ingen anledning att använda tabeller för webbplatsens grundkonstruktion.
  • Använd istället stilmallar (CSS:er) för att styra presentation och layout.
4 R98 Skriv rubriker till tabeller
  • 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.
Exportera urval som csv

Visa som kompakt lista

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