Riktlinjer i kategori Tillgänglig

2 juli, 2017

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.

2 juli, 2017

Gör 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.

2 juli, 2017

Ange sidans språk 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.

2 juli, 2017

Ange språkförändringar 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.

30 juni, 2017

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.

30 juni, 2017

Ge användarna möjlighet att justera tidsbegränsningar

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!

30 juni, 2017

Använd text, inte bilder, för 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.

30 juni, 2017

Utför inga oväntade förändringar vid fokusering

Utför ändringar när användaren har anledning att förvänta sig dem.

30 juni, 2017

Utför inga oväntade förändringar vid inmatning

Utför ändringar när användaren har anledning att förvänta sig dem.

30 juni, 2017

Ge förslag på hur fel kan rättas till

När fel upptäcks automatiskt bör förslag på korrekt inmatning presenteras för användaren om det är möjligt.

30 juni, 2017

Se till att skräddarsydda komponenter fungerar i hjälpmedel

2017-06-30: Resterande del av sidan är ett utkast. Syftet är att underlätta tillämpning av WCAG. Förbättringsförslag efterlyses. Kommentera gärna med hjälp av kommentarsfunktionen sist på sidan eller i Facebookgruppen webbriktlinjer eller med epost till info@webbriktlinjer.se.


Vad betyder det här?Länk hit


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, som i sin tur är beroende av att varje del av en webbsida eller applikation vid varje tillfälle exponerar sitt namn, sin roll och sitt aktuella värde för detta API. Då kan nämligen hjälpmedlet lyssna på alla händelser och upplysa användaren om de förändringar hen behöver känna till, samt presentera applikationen på ett korrekt sätt för användaren. En skärmläsare behöver till exempel kunna berätta för användaren när förändringar av sidans innehåll sker.


Rekommendationer för skräddarsydda komponenterLänk hit

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.  


TerminologiLänk hit


Hjälpmedel kallas på engelska för assistive technologies.

30 juni, 2017

Benämn funktioner konsekvent

Var konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar.

30 juni, 2017

Erbjud alternativ om en inspelning enbart består av ljud eller 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.

30 juni, 2017

Syntolka videoinspelningar

Ordna med syntolkning om det behövs för att personer med begränsad syn ska kunna ta del av videoinnehåll.

30 juni, 2017

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.

30 juni, 2017

Ge användarna möjlighet att pausa eller stänga av rörelser

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.

30 juni, 2017

Se till att text går att förstora 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).

30 juni, 2017

Texta direktsändningar

Digital video ska ha undertexter och för annat ljud bör en textversion erbjudas. Denna riktlinje gäller direktsändningar.

30 juni, 2017

Gör inte instruktioner beroende av sensoriska kännetecken

Ä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.

30 juni, 2017

Använd inte enbart färg för att förmedla information

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.

30 juni, 2017

Presentera innehållet i en meningsfull ordning för alla

2017-06-22: Resterande del av sidan är ett utkast. Syftet är att underlätta tillämpning av WCAG. Förbättringsförslag efterlyses. Kommentera gärna med hjälp av kommentarsfunktionen sist på sidan eller i Facebookgruppen webbriktlinjer eller med epost till info@webbriktlinjer.se.

Vad betyder det här?Länk hit

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 språk som läses från höger till vänster kan betydelsen påverkas av ordningen.

Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare, alltså även om ordningen skulle förändras.

Schematisk bild av sortering av innehållet på denna sida. Vid smal skärm ska inte allt innehåll i högerspalten presenteras sist, utan det som hör till WCAG-utdraget måste presenteras direkt efter utdraget.

Ett exempel på när ordningen har betydelse finns faktiskt på den här webbsidan:

Intill utdraget från WCAG ovan finns en kort text med fakta om utdraget. För läsare med stor skärm presenteras faktatexten till höger om utdraget. För användare med liten skärm presenteras den nedanför utdraget, och för användare med skärmläsare direkt efter utdraget. Därmed är ordningen logisk för alla. Men för att åstadkomma detta kunde vi inte koda sidan på enklaste sätt med vänsterspalten i ett div-element och därefter högerspalten i ett annat. Då hade nämligen faktatexten hamnat efter hela vänsterspalten för användare med liten skärm eller skärmläsare. Det skulle kunna få läsaren att felaktigt tro att faktatexten gällde innehållet längre ner i vänsterspalten, och inte utdraget.

Oftast, men inte alltid, presenteras innehållet i rätt ordning om det förekommer i rätt ordning i html-koden.


Rekommendationer för läsordningLänk hit

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.


30 juni, 2017

Ge användaren möjlighet att pausa, stänga av eller sänka ljud

Det ska alltid vara möjligt att pausa, stoppa eller sänka sådant ljud som spelas upp automatiskt.

30 juni, 2017

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.

30 juni, 2017

Markera tydligt vilket fält eller element som är 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.

30 juni, 2017

Utveckla systemet så att det går att hantera med enbart tangentbordet

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.

30 juni, 2017

Designa med tillräckliga 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.

27 juni, 2017

Grundläggande rekommendationer för appar

Komplettera gärna med en app när webben inte räcker till för att täcka målgruppens behov. Det kan till exempel handla om att viss ny funktionalitet som fungerar i en app inte går att erbjuda med en responsiv webbplats. Se till att appen följer riktlinjer för tillgänglighet. De flesta riktlinjer som gäller för webben är även tillämpbara på appar.

10 februari, 2017

Använd webbvideo för att öka tillgängligheten

Använd gärna video som komplement eller alternativ till andra presentationsformat. Texta och syntolka filmerna så kan fler ta del av innehållet.

21 december, 2016

Ge ordförslag vid sökning och inmatning

Underlätta för användarna genom att ge dem förslag på sökord när de utför en sökning på en webbplats. Funktionen ger bättre sökträffar, underlättar för vissa personer med skrivsvårigheter samt kan spara tid och förenkla för alla användare.

21 maj, 2012

Skapa snabbkommandon vid behov

Ni kan använda snabbkommandon på er webbplats genom att koppla snabbkommandon till objekt, till exempel till en specifik sida, del av en sida eller en funktion. Snabbkommandon kan ibland göra att det går snabbare att navigera på webbplatsen, men bör användas med försiktighet.

21 maj, 2012

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.

21 maj, 2012

Stryk aldrig under text som inte är länkad

När text är understruken signalerar det till användarna att den är klickbar.

21 maj, 2012

Skapa rubriker med h-element

Märk upp rubriker med h1, h2 och så vidare. Undvik att särskilja en rubrik från brödtext enbart genom formgivning. Det gör det nämligen svårare för personer med vissa hjälpmedel att navigera på sidan, och svårare för sökmotorer att avgöra vad sidan handlar om.

21 maj, 2012

Markera obligatoriska fält i formulär

Informera användaren om vilka fält i ett formulär som är obligatoriska, för att minska risken att onödig tid läggs på rättning av felaktigt eller ofullständigt ifyllda formulär.

21 maj, 2012

Använd rätt html-element när ni gör listor

En av poängerna med HTML är att språket kan användas för att märka upp semantiken i ett dokument. Märk upp listor som listor, och se till att inget annat än listor är märkta så. Skärmläsare och andra hjälpmedel behöver korrekt kodade listor för att kunna signalera till användaren att en lista faktiskt är just en lista.

21 maj, 2012

Skriv rubriker till tabeller

Tabeller kan vara svåra att tolka – både för användare med skärmläsare och för andra. Låt html-koden uttrycka vad tabellens olika delar innehåller, och hur de hänger ihop. På så vis blir tabellen tillgänglig för alla. Använd till exempel th-element för att ange vilka celler som är rad- och kolumnrubriker.

21 maj, 2012

Se till att bakåtknappen fungerar

Webbläsarens funktion för att backa är en av de mest använda funktionerna för att navigera på webben, både inom en webbplats och mellan webbplatser. Se därför till att den fungerar.

21 maj, 2012

Använd Javascript för att öka tillgängligheten – inte tvärtom

Javascript ger ofta en god användbarhet, och kan bidra till ökad tillgänglighet och effektivitet. Men det finns användare som inte kan eller vill använda Javascript. Se därför till att det går att använda webbplatsens viktigaste funktioner även utan Javascript, och följ riktlinjer för tillgänglig Javascript.

21 maj, 2012

Se till att webbplatsen kan användas även utan stilmallar

Gör det möjligt att använda webbplatsen även med webbläsare som inte stöder stilmallar, till exempel äldre eller textbaserade webbläsare. Användarna ska kunna ta del av innehållet och använda formulär, navigering och liknande. Presentationen behöver dock inte se likadan ut som i webbläsare med stöd för stilmallar.

21 maj, 2012

Publicera i första hand dokument i html och skapa tillgängliga pdf:er

Publicera dokument, som rapporter och utredningar, i webbplatsens standardformat (html). Andra format gör det svårare att komma åt informationen, eftersom de ofta kräver extra programvara. Om du ändå behöver lägga ut en pdf, se då till att göra den tillgänglig.