Riktlinjer i kategori Tillgänglighet

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

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

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

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.

29 juni, 2017

Beskriv med text allt innehåll som inte är text

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

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 här ovan under rubriken 1.1.1 Innehåll som inte är text.  Undantagen gäller framförallt sådana situationer där en beskrivande text skulle motverka innehållets syfte (till exempel när syftet med ett ljud är att testa användarens hörsel).

Använd text som är synlig för alla om det passar, eller html-attribut som till exempel alt och aria-label för kortfattade beskrivningar. När en textbeskrivning ligger separat kan du knyta id-attributet för det element som innehåller beskrivningen till det som beskrivs till exempel med hjälp av aria-labelledby eller aria-describedby. En fördel med separat textbeskrivning är att den – till skillnad från alt-attribut – kan formateras och innehålla länkar.


Rekommendationer för textalternativLänk hit

  • Välj detaljnivå efter användarens behov
  • Undvik upprepningar genom att provlyssna

Välj detaljnivå efter användarens behovLänk hit

Beskriv innehållet tillräckligt detaljerat för den som enbart uppfattar textbeskrivningen. Det är ofta bättre att sakligt och kortfattat beskriva innehållet än att ta upp varje detalj eller att ge subjektiva omdömen. Men det finns undantag. Ibland är det viktigt att beskriva känslan i en bild för att användaren ska få en förståelse för innehållet. Utgå från användarens behov och innehållets syfte.

Pictobild som föreställer en blomma. Bredvid står några olika exempel på dåliga textbeskrivningar (dsc20345.jpg, Foto; Jan Persson, Ange bildtext här, och mellanslag) och ett bra exempel: En vit blomma

Ofta finns det möjlighet att kombinera en kort textbeskrivning genom att till exempel använda alt-attribut på en bild med en mer utförlig separat text för den som vill fördjupa sig. Använd då till exempel attributet aria-describedby för att relatera innehållet till en separat text.

Andra riktlinjer (R117 Texta inspelad rörlig media (video, ljud, animationer…) och R119. Texta direktsändningar) tar upp frågor om fullständig textversion av “tidsberoende media” det vill säga inspelningar och direktsändningar. Denna riktlinje innebär bara att det behöver finnas en sammanfattande text som beskriver sådant innehåll.


Undvik upprepningar genom att provlyssnaLänk hit

Om det finns en bildtext eller annan brödtext som beskriver bildens innehåll bör inte inte den alternativa textbeskrivningen upprepa textens innehåll. Ett bra sätt att bedöma hur bra alternativa textbeskrivningar fungerar är att lyssna på webbplatsen med hjälp av en skärmläsare.


Därför är textpresentationer viktigaLänk hit

Med hjälp av digital teknik kan de flesta användare ta till sig en text. Den som ser kan läsa texten, den som hör kan få den uppläst, den kan presenteras som punktskrift för den som läser med hjälp av känseln. Text kan förstoras och presenteras med olika teckensnitt och färgskalor. Uppläsning kan ske med olika hastighet och röst. I många fall kan text till och med översättas automatiskt innan den presenteras för användaren.

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.

22 juni, 2017

Texta inspelad rörlig media (video, ljud, animationer…)

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.

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.

30 oktober, 2014

Anpassa webbplatsen även för små skärmar

Allt fler använder mobilen eller andra enheter med små skärmar för att besöka webbplatser och använda tjänster och program. Anpassa därför information, funktioner och gränssnitt för alla typer av skärmar.

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

Märk upp citat i koden

Om ni använder citat i texter ska de märkas upp som citat i koden. Då kan ni lätt ge citat ett eget grafiskt utseende via css. Märkningen och utseendet tydliggör för användarna vad som är ett citat från viss person, till skillnad från vanlig text som ni själva som avsändare står för. Hjälpmedel kan också behöva korrekt kodade citat för att kunna ange för användarna när något är ett citat.

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

Gör webbadresser bokmärkningsbara

Se till att användare som gör bokmärken till sidor kommer tillbaka till rätt sida i framtiden.

21 maj, 2012

Använd inte ramar

Använd i första hand serverbaserade tekniker för att infoga innehåll i sidor. Använd inte ramar (frames) för att utforma webbplatsen. Det orsakar nämligen en rad problem med användbarhet och tillgänglighet.

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.