Tillgänglighetsriktlinjer
Riktlinjerna omfattar nivå A och AA i WCAG 2.1
Dokument omfattar de tillgänglighetsriktlinjer som gäller för
Migrationsverkets system och digitala tjänster. Riktlinjerna motsvarar
nivå AA i WCAG 2.1. De riktlinjerna som för närvarande ingår utgör en
miniminivå för tillgänglighet och är under utarbetande vilket innebär
att det kan tillkomma fler riktlinjer och justeringar efterhand som
arbetet fortskrider. | Version 1 |
Visa var ett fel uppstått och beskriv det tydligt
https://webbriktlinjer.se/riktlinjer/2-ge-begripliga-felmeddelanden/
Hjälp dina användare när det blir fel. Väl formulerade felmeddelanden ger användarna möjlighet att fylla i så felfria data som möjligt i formulären. De minskar också risken för att användarna ska bli irriterade när systemet inte förstår eller kan tolka den felaktigt inmatade informationen.
Se till att hjälpmedel kan presentera meddelanden som inte är i fokus
https://webbriktlinjer.se/riktlinjer/164-meddelanden-som-inte-ar-fokus/
Se till att de som använder tekniska hjälpmedel som som exempelvis skärmläsare och förstoringsprogram kan göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus. Ange med hjälp av attributen role eller aria-live var viktiga meddelanden kan förekomma, så får hjälpmedel kännedom om dessa och kan presentera dem för användaren vid ett lämpligt tillfälle. Berörda användare riskerar annars att missa varningar, upplysningar och felmeddelanden.
Erbjud alternativ till rörelsestyrning
https://webbriktlinjer.se/riktlinjer/163-erbjud-alternativ-till-rorelsestyrning/
Se till att funktioner som aktiveras genom att användaren till exempel skakar, vrider, rör vid eller viftar framför enheten kan stängas av. Funktionerna ska även kunna aktiveras på något annat sätt.
Möjliggör röststyrning av knappar och kontroller
https://webbriktlinjer.se/riktlinjer/162-mojliggor-roststyrning-av-knappar-och-kontroller/
Se till att text som är synlig på knappar och andra gränssnittskontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning. Den som använder röststyrning säger vanligtvis det som står på en knapp för att använda knappen. Detta fungerar om det som står på knappen motsvarar den maskinläsbara texten. Upplevelsen för seende som använder skärmläsare blir också bättre om uppläst text matchar det som visas på skärmen.
Gör det möjligt att ångra klick
https://webbriktlinjer.se/riktlinjer/161-gor-det-mojligt-att-angra-klick/
Den som använder pekskärm eller pekdon som exempelvis mus behöver kunna ångra sig om knappen eller trycket skedde av misstag. Erbjud därför minst en sådan möjlighet. Möjligheten att ångra ett påbörjat klick är värdefull därför att den minskar risken för att aktivera funktioner av misstag. Vem som helst kan råka trycka vid fel plats eller tillfälle, och det är extra lätt hänt för personer med vissa funktionsnedsättningar (exempelvis begränsad motorisk kontroll eller synnedsättning). Denna riktlinje berör dig som programmerar användargränssnitt ("front-end") med exempelvis Javascript, men inte dig som enbart jobbar med text, bild och formgivning.
Erbjud alternativ till komplexa fingerrörelser
https://webbriktlinjer.se/riktlinjer/160-erbjud-alternativ-till-komplexa-fingerrorelser/
Alla personer kan inte hantera komplexa rörelser på en pekskärm, så kallade fingergester. Detta gäller till exempel att svajpa (swipe) och gester som kräver flera fingrar (multi-touch) såsom dra isär och nyp ihop. Det kan bero på motoriska eller kognitiva begränsningar, vilket hjälpmedel en användare har eller användarens brist på kunskap om gränssnittet. Komplettera därför alltid sådana med enklare interaktion såsom klick, dubbelklick eller tryck, såvida inte rörelsen är avgörande för funktionaliteten. Observera att riktlinjen bara gäller webbplatsens eller appens gränssnitt. Det gäller inte operativsystemets eller webbläsarens funktioner, såsom horisontell svepning för att navigera i sidhistoriken. Riktlinjen undantar funktionalitet som naturligt kräver mer komplexa rörelser, till exempel att skriva sin signatur.
Popup-funktioner ska kunna hanteras och stängas av alla
https://webbriktlinjer.se/riktlinjer/158-popup-funktioner-ska-kunna-hanteras-och-stangas-av-alla/
Innehåll, till exempel popup-rutor, som dyker upp vid tangentbordsfokus eller när användaren för muspekaren (hovrar) över ett visst objekt ska kunna uppfattas och hanteras av alla - även av användare som har förstorat sidan eller tar längre tid på sig att komma till innehållet. Det är särskilt viktigt att innehållet enkelt kan tas bort eller stängas. Det kan till exempel gälla undermenyer, inforutor (tooltips) och icke-modala popup-fönster. Tyvärr skapar sådant innehåll annars ofta tillgänglighetsproblem, till exempel för att:
användaren inte har aktiverat funktionen med avsikt, användaren inte blir medveten om att det har dykt upp nytt innehåll eller
det nya innehållet stör användarens förmåga att genomföra en uppgift.
Se till att det går att öka avstånd mellan tecken, rader, stycken och ord
https://webbriktlinjer.se/riktlinjer/157-avstand-mellan-tecken-rader-stycken-och-ord/
Många användare, till exempel dyslektiker och personer med nedsatt syn, behöver kunna påverka avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa. Gör det därför möjligt för användaren att påverka avstånden utan att innehåll eller funktionalitet krockar eller gömmer sig bakom annat innehåll. Denna riktlinje är mycket lik Se till att text går att förstora utan problem (R127) men gäller alltså mellanrummen och inte själva tecknen. Användaren ska ha möjlighet att öka avstånd åtminstone upp till följande relativa gränsvärden:
Radavstånd ska kunna ökas minst 1,5 gånger teckensnittets storlek. Teckenavstånd ska kunna ökas minst 0,12 gånger teckensnittets storlek.
Avståndet mellan ord ska kunna ökas minst 0,16 gånger teckensnittets storlek.
Avståndet mellan stycken ska kunna ökas minst 2 gånger teckensnittets storlek.
Förstoring av mellanrum kan ske på olika sätt. Till exempel med hjälp av länk en bookmarklet som ökar avstånden , med ett förstoringshjälpmedel eller genom att länk ställa in webbläsaren att tillämpa användarens egen css-kod . Riktlinjen gäller inte för länk öppna undertexter i video och inte heller för text som förekommer i bilder (vilket i och för sig ofta bör undvikas, se länk Använd text, inte bilder, för att visa text (R128)
). För närvarande är även PDF undantaget.
Använd tillräckliga kontraster i komponenter och grafik
https://webbriktlinjer.se/riktlinjer/156-anvand-tillrackliga-kontraster-i-komponenter-och-grafik/
Personer med nedsatt syn har ofta svårt att urskilja visuella kontraster mellan exempelvis en symbol och dess bakgrund, och riskerar därför att missa information. Designa därför webbplatsen så att komponenter i gränssnittet och informationsbärande grafik har tillräckliga kontraster. Som komponenter räknas till exempel knappar och formulärfält. Som grafiska objekt räknas exempelvis ikoner och betydelsefulla delar av illustrationer och diagram (till exempel kurvor och pilar). Denna riktlinje liknar Använd tillräcklig kontrast mellan text och bakgrund (R126) (som motsvarar WCAG-kriteriet 1.4.3). Men nu gäller alltså motsvarande krav även för innehåll som inte är text.
Märk upp vanliga formulärfält i koden
https://webbriktlinjer.se/riktlinjer/154-mark-upp-vanliga-formularfalt-i-koden/
Hjälp dina användare att fylla i inmatningsfält genom att ange i kod vilken typ av innehåll som förväntas. Då kan webbläsare eller hjälpmedel ibland automatiskt föreslå inmatning (baserat på till exempel tidigare inmatning i fält av samma typ) i vanliga formulärfält (såsom gatu- och postadress). Systemet kan också ytterligare hjälpa användaren genom att presentera fältet på ett sätt (till exempel med en symbol) som användaren känner igen.
Det är bra för alla användare, men kanske framför allt för personer med vissa kognitiva och motoriska funktionsnedsättningar och för användare som inte kan sidans språk så bra.
Skapa en design som fungerar oavsett skärmens riktning
Alla människor har inte möjlighet att vrida på sin skärm. Vissa måste välja ett läge (stående eller liggande) och alltid använda detta, exempelvis med skärmen fast monterad på en rullstol. Skapa därför en design så att innehåll och funktioner är tillgängliga oavsett skärmens riktning.
Det finns inget som hindrar att presentationen av innehållet och funktionerna skiljer sig åt mellan de båda lägena så länge innehållet är tillgängligt och funktionerna är åtkomliga och har normal funktion. I riktlinjen finns undantag för när funktionaliteten är beroende av att användaren har skärmen i en viss riktning, till exempel ett pianoprogram där liggande läge är nödvändigt för att alla tangenterna ska få plats. Informera användaren om när en viss riktning av skärmen är nödvändigt.
Se till att skräddarsydda komponenter fungerar i hjälpmedel
https://webbriktlinjer.se/riktlinjer/152-se-till-att-skraddarsydda-komponenter-fungerar-hjalpmedel/
Många användare behöver hjälpmedel såsom skärmläsarprogram, förstoringsprogram punktdisplay med mera. Dessa hjälpmedel kommunicerar med operativsystemets tillgänglighets-API. För att det ska fungera behöver varje del av en webbsida eller applikation vid varje tillfälle exponera sitt namn, sin roll och sitt aktuella värde. Då kan hjälpmedlet presentera applikationen på ett korrekt sätt för användaren. En skärmläsare behöver […]
Ge möjlighet att ångra, korrigera eller bekräfta vid viktiga transaktioner
Den som råkar göra något fel kan slippa mycket besvär om felet kan upptäckas och åtgärdas direkt.
Ge förslag på hur fel kan rättas till
https://webbriktlinjer.se/riktlinjer/149-ge-forslag-pa-hur-fel-kan-rattas-till/
När fel upptäcks automatiskt bör förslag på korrekt inmatning presenteras för användaren om det är möjligt.
Benämn funktioner konsekvent
https://webbriktlinjer.se/riktlinjer/146-benamn-funktioner-konsekvent/
Var konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar.
Utför inga oväntade förändringar vid inmatning
https://webbriktlinjer.se/riktlinjer/144-utfor-inga-ovantade-forandringar-vid-inmatning/
Utför ändringar när användaren har anledning att förvänta sig dem.
Utför inga oväntade förändringar vid fokusering
https://webbriktlinjer.se/riktlinjer/143-utfor-inga-ovantade-forandringar-vid-fokusering/
Utför ändringar när användaren har anledning att förvänta sig dem.
Ange språkförändringar i koden
https://webbriktlinjer.se/riktlinjer/142-ange-sprakforandringar-koden/
För att öka sannolikheten att till exempel skärmläsare presenterar innehållet korrekt bör html-koden ange aktuellt språk med hjälp av lang-attribut.
Ange sidans språk i koden
https://webbriktlinjer.se/riktlinjer/141-ange-sidans-sprak-i-koden/
För att öka sannolikheten att till exempel skärmläsare presenterar innehållet korrekt bör html-koden ange aktuellt språk med hjälp av lang-attribut.
Markera tydligt vilket fält eller element som är i fokus
https://webbriktlinjer.se/riktlinjer/140-markera-element-i-fokus/
Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se. Gör markeringen tydlig, till exempel med en CSS-regel.
Gör en logisk tab-ordning
https://webbriktlinjer.se/riktlinjer/136-gor-en-logisk-tab-ordning/
Testa tab-ordningen genom att granska en sida av varje sidtyp utan hjälp av tryckkänslig skärm, mus eller annat pekdon.
Skriv beskrivande sidtitlar
https://webbriktlinjer.se/riktlinjer/135-skriv-beskrivande-sidtitlar/
En bra beskrivande titel sammanfattar sidans ämne eller innehåll. Varje sida på en webbplats, liksom andra typer av dokument bör ha en unik titel.
Orsaka inte epileptiska anfall genom blinkande
https://webbriktlinjer.se/riktlinjer/133-orsaka-inte-epileptiska-anfall-genom-blinkande/
Personer med en viss kategori av epilepsi kan få krampanfall om de utsätts för snabbt blinkande "flimmer" som upptar en tillräckligt stor del av synfältet.
Ge användarna möjlighet att pausa eller stänga av rörelser
https://webbriktlinjer.se/riktlinjer/132-ge-anvandarna-mojlighet-att-pausa-eller-stanga-av-rorelser/
Personer som har svårt att fokusera, läsa eller behålla koncentration behöver kunna pausa rörelser eller stänga av visuella distraktioner.
Ge användarna möjlighet att justera tidsbegränsningar
https://webbriktlinjer.se/riktlinjer/131-ge-anvandarna-mojlighet-att-justera-tidsbegransningar/
Användare behöver ibland möjlighet att justera tidsbegräsningar som finns inbyggda i systemet, till exempel i en beställningsfunktion. Ge dem det!
Se till att markören inte fastnar vid tangentbordsnavigation
Markören ska inte fastna vid tangentbordsnavigation. Det kan hindra besökare att använda webbplatsen eller vissa funktioner.
Utveckla systemet så att det går att hantera med enbart tangentbordet
Riktlinje Den som bara kan eller vill använda tangentbordet (eller hjälpmedel som kopplas till tangentbords-kommandon) är beroende av att systemet inte förutsätter att användaren har till exempel mus eller pekskärm.
https://webbriktlinjer.se/riktlinjer/129-gar-att-hantera-med-tangentbord/
Använd text, inte bilder, för att visa text
https://webbriktlinjer.se/riktlinjer/128-anvand-text-inte-bilder-for-att-visa-text/
Användare behöver då och då anpassa texten bland annat genom att förstora eller välja ett annat teckensnitt, ändra förgrund- och bakgrundsfärger eller linjeavstånd. Om texten utgör en del av en bild saknas ofta de möjligheterna.
Se till att text går att förstora utan problem
https://webbriktlinjer.se/riktlinjer/127-se-till-att-text-gar-att-forstora-utan-problem/
Det ska vara möjligt att förstora texten till åtminstone dubbel höjd och bredd utan att problem uppstår (till exempel att text hamnar bakom en bild eller krockar med annan text).
Mätbarhet Använd testfall ZEP-2684 för att kontrollera att riktlinje 127 uppfylls.
Använd tillräcklig kontrast mellan text och bakgrund
https://webbriktlinjer.se/riktlinjer/126-tillrackliga-kontraster/
Personer med nedsatt syn har ofta svårt att läsa text med bristande kontrast mot textens bakgrund. De flesta kan läsa brödtext på skärm om skillnaden i ljusintensitet mellan förgrund och bakgrund har förhållandet 4,5:1.
Ge användaren möjlighet att pausa, stänga av eller sänka ljud
https://webbriktlinjer.se/riktlinjer/125-kunna-pausa-ljud/
Det ska alltid vara möjligt att pausa, stoppa eller sänka sådant ljud som spelas upp automatiskt.
Använd inte enbart färg för att förmedla information
https://webbriktlinjer.se/riktlinjer/124-inte-bara-farg/
Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation.
Gör inte instruktioner beroende av sensoriska kännetecken
https://webbriktlinjer.se/riktlinjer/123-ej-beroende-av-sensoriska-kannetecken/
Även den som inte kan uppfatta form, storlek eller har möjlighet att relatera till höger eller vänster behöver kunna förstå till navigation och instruktioner.
Presentera innehållet i en meningsfull ordning för alla
https://webbriktlinjer.se/riktlinjer/122-meningsfull-ordning/
Alla användare tar inte del av informationen i samma ordning. En visuell presentation kan till exempel använda kolumner och rutnät för att fördela innehållet i två dimensioner, medan en skärmläsare presenterar innehållet sekventiellt. Responsiv design, som anpassar presentationen baserat på skärmstorlek, kan påverka ordningen. Även när språk som läses från vänster till höger blandas med […]
Ange i kod vad sidans olika delar har för roll
https://webbriktlinjer.se/riktlinjer/121-ange-i-kod-vad-sidans-olika-delar-har-for-roll/
Öka chansen att informationen presenteras korrekt oavsett mottagarens verktyg, genom att använda html-elementen på rätt sätt.
Edit this page
Syntolka videoinspelningar
https://webbriktlinjer.se/riktlinjer/120-syntolka-videoinspelningar/
Ordna med syntolkning om det behövs för att personer med begränsad syn ska kunna ta del av videoinnehåll.
Texta direktsändningar
https://webbriktlinjer.se/riktlinjer/119-texta-direktsandningar/
Digital video ska ha undertexter och för annat ljud bör en textversion erbjudas. Denna riktlinje gäller direktsändningar.
Syntolka eller erbjud alternativ till videoinspelningar
https://webbriktlinjer.se/riktlinjer/118-syntolka-eller-erbjud-alternativ-till-videoinspelningar/
Den som inte kan ta del av det visuella innehållet i videoinspelningar, till exempel på grund av synnedsättning, ska kunna få motsvarande information antingen i form av syntolkning (ljudbeskrivning) eller presenterad som text.
Texta inspelad rörlig media (video, ljud, animationer…)
https://webbriktlinjer.se/riktlinjer/117-texta-inspelad-rorlig-media/
Inspelad digital video ska ha undertexter (kallas även textbeskrivningar eller textremsa) och för ljudinspelningar (till exempel podcasts) med mera bör en textversion erbjudas.
Erbjud alternativ om en inspelning enbart består av ljud eller video
https://webbriktlinjer.se/riktlinjer/116-alternativ-vid-enbart-ljud-video/
Användare som inte kan ta del av ljud- eller videoinspelningar ska ha en möjlighet att tillgodogöra sig innehållet med hjälp av en alternativ representation.
Beskriv med text allt innehåll som inte är text
https://webbriktlinjer.se/riktlinjer/115-textalternativ/
Användare som är beroende av till exempel skärmläsare och punktdisplay behöver beskrivningar av allt innehåll som inte är text. Det gäller till exempel: Bilder (förutom sådana som endast används för dekoration) Diagram Animationer Ljudsignaler Se därför till att allt sådant innehåll beskrivs med hjälp av text, förutom i de undantagsfall som beskrivs i WCAG-kriteriet. Undantagen […]
Skapa en flexibel layout som fungerar vid förstoring eller liten skärm
https://webbriktlinjer.se/riktlinjer/91-skapa-en-flexibel-layout/
Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning. I praktiken innebär det responsiv design och att att riktigt långa ord behöver avstavas. Att behöva scrolla i sidled är besvärligt och försämrar upplevelsen. Många använder små skärmar och personer som på grund av nedsatt syn förstorar innehållet har liknande behov.
Se till att koden validerar
https://webbriktlinjer.se/riktlinjer/84-se-till-att-koden-validerar/
Se till att er webbplats har sidmallar och stilmallar som har en god kodkvalitet och följer standarder. Det ökar chansen att alla användare kan komma åt informationen och tjänsterna på webbplatsen, oavsett vilka verktyg de använder.
Erbjud möjlighet att hoppa förbi återkommande innehåll
Bygg in genvägar i strukturen. Det kan ta lång tid att ta sig till olika delar av ett dokument när man navigerar med tangentbord, eftersom man normalt måste stega sig förbi varje länk. Webbplatser som har ett omfattande och komplext menysystem med många länkar kan försvåra avsevärt för många användare.
Skapa kortkommandon med varsamhet
https://webbriktlinjer.se/riktlinjer/68-skapa-snabbkommandon-for-viktiga-funktioner/
Kortkommandon kan göra att det går snabbare att navigera på webbplatsen, men de bör användas med försiktighet. Det finns en risk att webbplatsens kortkommandon förväxlas med kortkommandon som användarens webbläsare, operativsystem eller hjälpmedel erbjuder. Kortkommandon som bara består av ett tecken kan dessutom orsaka problem för personer som använder röststyrning eller råkar klicka på fel tangent, exempelvis på grund av skakningar i händerna. Riktlinjen påverkar inte funktioner såsom listboxar och rullgardinsmenyer där användare kan göra sitt val genom att en eller flera tangenter trycks ned, eftersom detta bara går att göra när komponenten är i fokus.
Skriv beskrivande rubriker och etikettera
https://webbriktlinjer.se/riktlinjer/61-skriv-tydliga-och-berattande-rubriker/
Bra rubriker hjälper läsaren att hitta i texten. Rubrikerna är särskilt viktiga för personer som använder skärmläsare, som kan läsa upp en lista över rubrikerna på en sida. Rubrikerna ska vara lagom långa och sammanfatta vad sidan eller avsnittet handlar om. Alltför korta och allmänna rubriker ger inte användarna så mycket hjälp, till exempel "Inledning" eller "Aktiviteter".
Skapa tydliga och klickbara fältetiketter
https://webbriktlinjer.se/riktlinjer/55-skapa-tydliga-och-klickbara-faltetiketter/
För varje fält i ett formulär där användarna ska fylla i information, skapa en tydlig fältetikett (label) som förklarar fältets funktion.
Erbjud användarna flera olika sätt att navigera
https://webbriktlinjer.se/riktlinjer/32-erbjud-besokaren-alternativa-orienteringsstod/
Användare har många olika strategier för att hitta på webbplatser. Erbjud därför fler sätt att navigera utöver sökfunktionen och den primära navigeringen/menyn.
Var konsekvent i navigation, struktur och utformning
https://webbriktlinjer.se/riktlinjer/29-var-konsekvent-i-navigation-struktur-och-utformning/
Konsekvens är mycket viktigt för att användarna ska förstå hur webbplatsen fungerar. Det betyder inte att alla sidor måste se likadana ut, men liknande uppgifter ska utföras på samma sätt oavsett var på webbplatsen man befinner sig.
Skriv tydliga länkar
https://webbriktlinjer.se/riktlinjer/5-skriv-tydliga-lankar/
Skriv länkarna så att användarna förstår vart länken leder även när den är lyft ur sitt sammanhang. På webben skummar vi ofta igenom information och blicken fastnar på avvikelser såsom rubriker, markerade ord och länkar. Tydliga och informativa länkar gör att besökarna snabbare hittar den information de söker.
Felhantering
Visa var ett fel uppstått och beskriv det tydligt webbriktlinjer
Hjälp dina användare när det blir fel. Väl formulerade felmeddelanden ger användarna möjlighet att fylla i så felfria data som möjligt i formulären. De minskar också risken för att användarna ska bli irriterade när systemet inte förstår eller kan tolka den felaktigt inmatade informationen.
Visa var ett fel uppstått och beskriv det tydligt
https://webbriktlinjer.se/riktlinjer/2-ge-begripliga-felmeddelanden/
Hjälp dina användare när det blir fel. Väl formulerade felmeddelanden ger användarna möjlighet att fylla i så felfria data som möjligt i formulären. De minskar också risken för att användarna ska bli irriterade när systemet inte förstår eller kan tolka den felaktigt inmatade informationen.