Riktlinjer i kategori Innehållsproduktion

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

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.

29 juni, 2017

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

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


Utdrag från WCAG-standardenLänk hit

Riktlinje 1.1 Textalternativ: Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll så att det kan konverteras till format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk.

1.1.1 Innehåll som inte är text: Allt innehåll som inte är text, som presenteras för användaren har ett textalternativ med samma syfte, utom i de situationer som anges nedan. (Nivå A)

  • Navigeringsmetod/funktion, inmatning: Om innehåll som inte är text är en navigeringsmetod/funktion eller accepterar inmatning från användare så ska den ha ett namn som beskriver dess syfte. (Se Riktlinje 4.1 för ytterligare krav på navigeringsmetod/funktion och innehåll som accepterar inmatning från användare).
  • Tidsberoende media: Om innehåll som inte är text är tidsberoende media så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text. (Se Riktlinje 1.2 för ytterligare krav på media).
  • Test: Om innehåll som inte är text är ett test eller en övning som inte skulle fungera om det visades som text, så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.
  • Sensorisk: Om innehåll som inte är text främst är avsett för att ge en specifik sensorisk upplevelse så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.
  • CAPTCHA: Om syftet med innehållet som inte är text är att bekräfta att en människa, snarare än en dator, försöker komma åt informationen så ska textalternativ som identifierar och beskriver syftet av innehållet tillhandahållas. Alternativa former av CAPTCHA, som använder sig av utmatningsmetoder för olika typer av sensorisk upplevelse, tillhandahålls för att tillgodose olika funktionsnedsättningar.
  • Dekoration, formatering, osynlig: Om innehåll som inte är text är rent dekorativt, bara används för visuell formatering eller inte presenteras för användare, så implementeras det på ett sätt så att det kan ignoreras av hjälpmedel.

TerminologiLänk hit

CAPTCHA är en förkortning av ”Completely Automated Public Turing test to tell Computers and Humans Apart” vilket innebär att det är ett sätt att avgöra om användaren är en människa eller ett datorprogram (ibland kallad ”bot” i detta sammanhang). Framförallt används CAPTCHAs för att förhindra skräppost och annat missbruk av digitala tjänster, som ofta sker med hjälp av program. Tyvärr finns risk för att även användare som faktiskt är människor har problem att ta sig förbi testet, eftersom det kan ställa mycket höga krav på syn, kognition eller hörsel. Erbjud sätt att komma förbi CAPTCHA som fungerar oavsett eventuell funktionsnedsättning. Ett inlägg (på engelska) på designbloggen Telepathy beskriver några alternativ till CAPTCHA.

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.

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

Utforma webbadresser med omsorg

Se till att era webbadresser kommer att vara tydliga och fungera bra, även på papper. Webbadresser behöver vara enkla att uppfatta. De kan behöva användas till exempel från utskrivna e-brev eller tryckta material, eller läsas upp i etermedier. Det finns risk att användarna uppfattar dem fel. Utforma därför webbadresserna med omsorg.

21 maj, 2012

Skapa korta webbadresser för sidor som ska spridas

Om adressen till en sida ska spridas, till exempel i annonser eller tryckt material, så skapa en kort och tydlig webbadress.

21 maj, 2012

Ange om ett dokument är en del av ett större dokument

Om ett dokument är en del av ett större dokument, eller är nära relaterat till andra material, länka dit och använd relevanta attribut som beskriver relationen. Till exempel kan varje kapitel av en rapport ligga på varsin sida, med länkar sinsemellan, som har attributen ”prev” och ”next” . Det finns också särskilda attibut för tillhörande ordlistor, upphovsrättsinformation med mera. De underlättar för användare och sökmotorer att förstå att, och hur, dokument hör ihop.

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

Gör det enkelt att ringa upp telefonnummer

Märk upp telefonnummer med tel-länkar, så att man kan ringa upp ett telefonnummer direkt, genom att klicka på det.

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.

21 maj, 2012

Basera inte viktig funktionalitet på format som kräver insticksprogram

Flash, Quicktime och liknande ger ofta problem för de som använder hjälpmedel, eller som inte använder mus, även när webbläsaren har ett insticksprogram för att hantera dem. Låt därför ert viktigaste innehåll vara användbart även utan insticksprogram.

21 maj, 2012

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.

21 maj, 2012

Använd inte tabeller för layout

Formge inte er webbplats med hjälp av tabeller. Det finns nämligen en risk att användare som använder läshjälpmedel får informationen i tabellerna i fel ordning eller inte alls, beroende på hur komplexa tabellstrukturer som används. Även om tabellstrukturen fungerar så kommer vissa hjälpmedel att läsa upp information om tabellerna, vilket gör det svårare för användarna att förstå innehållet.

21 maj, 2012

Använd stilmallar för att separera presentationen från innehållet

Använd stilmallar (cascading style sheets, css:er), där ni samlar alla regler för webbplatsens utseende: hur textelement ska se ut, var på sidan objekt ska placeras och hur objektens utseende ska justeras.

21 maj, 2012

Ge tydlig återkoppling i e-tjänster

Ge tydlig återkoppling till användarna i ärenden som utförs via webben och e-tjänster. Vanliga automatiserade funktioner för kommunikation är meddelande, granskning, kvittens och mottagningsbevis.

21 maj, 2012

Skriv datum och andra siffreruppgifter konsekvent

Använd ett konsekvent sätt att skriva datum och andra sifferuppgifter. Om datum presenteras på flera olika sätt kan det vara förvirrande för läsaren, särskilt för personer som får innehållet uppläst av ett hjälpmedel.

21 maj, 2012

Använd ord och termer konsekvent

Var konsekvent med hur ni använder ord och termer, för att undvika feltolkningar. Kontrollera konsekvensen i ert ordval på webbplatsen, både i texter och i navigation och funktioner.

21 maj, 2012

Skriv lättbegripliga texter

Texter på webbplatser bör skrivas på ett så enkelt och begripligt språk som möjligt, för att vara effektiva att läsa, och för att kunna förstås av ett stort antal läsare.

21 maj, 2012

Visa var i en process användaren befinner sig

Visa användarna tydligt var de befinner sig, när de tar sig igenom en process, till exempel om de håller på att göra en anmälan eller beställning i flera steg. Risken är annars att de blir osäkra och frustrerade, och i värsta fall väljer att avbryta processen.

21 maj, 2012

Gör texterna överskådliga

Ingångssidan och andra huvudsidor på webbplatsen bör vara relativt korta, för att ge användarna en överblick över innehållet. Undersidor kan innehålla lite längre texter.

21 maj, 2012

Skriv beskrivande rubriker och etiketter

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

21 maj, 2012

Gör tydliga användbara knappar

Se till att knappar är lätta att förstå och använda. Namnge knapparna tydligt, och på vedertagna sätt.

18 maj, 2012

Låt inte en webbadress sluta fungera

Det finns ett stort värde i de länkar som leder till er webbplats, både för användarna som vill kunna hitta den, och för er i sökmotorernas rankning. Se därför till att länkarna fortsätter att fungera även på lång sikt. De ska inte sluta fungera om ni byter publiceringsverktyg.

18 maj, 2012

Skapa tydliga och klickbara fältetiketter

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.

18 maj, 2012

Fyll formulär med kända uppgifter

Gör det enkelt för användarna att fylla i formulär genom att i förväg fylla i de uppgifter du redan har.

18 maj, 2012

Lyft fram det viktigaste i texten

Se till att det viktigaste i varje text och avsnitt lyfts upp och lyfts fram tydligt. Se till att texter inte är onödigt långa, och att de inte har viktigt innehåll längre ner. Risken är att användarna missar det viktiga, eller får lägga onödigt lång tid på att hitta det.

18 maj, 2012

Minimera antalet fält i formulär

Använd så få fält som möjligt i formulär. Det ökar läsbarheten och användbarheten. Minimera särskilt antalet obligatoriska fält. Endast de som är absolut nödvändiga för att ni ska få in tillräckligt med uppgifter bör vara obligatoriska.

18 maj, 2012

Gör det möjligt att få ut avpublicerat material

Om ni är en myndighet och publicerar något på webbplatsen upprättas allmänna handlingar. För att allmänhetens rätt till insyn ska kunna tillgodoses över tid krävs att ni kan tillhandahålla även den information som inte längre finns tillgänglig på den aktiva webbplatsen.

18 maj, 2012

Undvik oavsiktlig gallring vid ändringar och uppdateringar

Innehåll på myndigheters webbplatser är allmänna handlingar som ska bevaras enligt arkivlagstiftningen. Man får ta bort information och gallra, men bara om det finns stöd i en författning.

18 maj, 2012

Gör det möjligt att läsa och söka i diariet

Om din organisation har ett offentligt diarium kan ni öka er transparens genom att publicera diariet på webben. Innan ni gör diariet sökbart för användarna måste dock intresset av ökad insyn ställas mot skyddet av den personliga integriteten.

18 maj, 2012

Gör register och databaser med publik information sökbara

Användarna har ofta stor nytta av att själva kunna söka i publika register och databaser. Överväg därför att göra sådana sökbara, men ta hänsyn till vilka risker och behov som finns.

25 april, 2012

Ge webbplatsen en god läsbarhet

Typsnittet och luftigheten i texten påverkar webbplatsens läsbarhet. Texten bör vara så stor att den är bekväm att läsa. Alltför liten text, stora textmassor och många olika typsnitt gör texterna svårlästa. Begränsa därför antalet typsnitt på webbplatsen och använd alltid flexibla måttenheter, till exempel em eller procent, så att det går att att påverka storleken på texten med webbläsarens inbyggda funktionalitet.

25 april, 2012

Kontrollera besöksstatistiken och sökbeteendet regelbundet

Ju mer ni vet om era användares beteende, desto lättare kan ni anpassa innehållet till deras behov. Kontrollera vilka delar av webbplatsen som besöks mest respektive minst, och hur webbplatsens sökfunktion används.

25 april, 2012

Använd startsidan för att ge en introduktion till webbplatsen

Startsidan används ofta av besökare som inte är bekanta med webbplatsen och som inte vet så mycket om hur organisationen är uppbyggd. Den är också en naturlig plats att återvända till om användarna gått vilse i strukturen. Se startsidan som en innehållsdeklaration, där de osäkra användarna får hjälp att hitta det de söker.