Till innehållet

Digital tillgänglighet

Designa för funktionsvariationer och gör det samtidigt bättre för alla i fler situationer. Undersök, och upplev, sju vanliga digitala tillgänglighetsfallgropar och lär dig vad du ska tänka på för att inte putta ned dina användare där.

Kontraster

Ser du

att solen lyser?

Ser du
allt som står om kontrasterna är dåliga och det skulle vara så
att solen lyser?

Dåliga kontraster gör att du kan missa saker.

Din mottagare till exempel, som inte orkar läsa klart för att läsbarheten inte är tillräcklig.

Kontraster

  • Rubrikers kontrastvärde ska vara minst 3:1.
  • Kontrastvärde på brödtext (mindre än 18 px) ska vara minst 4.5:1, gärna 7:1.
  • Kontrastsäkring gäller också knappar och informationsbärande grafik.
  • Använd gärna en fast bakgrundsfärg bakom all text (eftersom text på bakgrundsbild är svårare att kontrastsäkra).

Klickbart

Prickar du rätt?

Försök att klicka på pricken.

Det är lätt att pricka snett!

Om klickytan är liten och du är darrig på handen eller om du sitter på en skumpig buss.

Gör det lättare för alla!

Knappar ska vara lätta att urskilja, lätta att träffa och lätta att förstå vad de gör. Då får du fler nöjda användare.

Klickbart

  • Ytan bör vara minst 44 px hög, gärna mer om den används ofta. Ha gärna minst 6 px mellan klickbara objekt.
  • Markera tydligt att objektet är klickbart, både med och utan fokus och hover.
  • Färg får inte ensamt användas för att särskilja klickbara ytor om inte kontrastvärdet är minst 3:1.
  • Information som presenteras med färg ska kompletteras med text och/eller ikon.

Typografi

Typografi kan locka till läsning

Men också stänga ute om fonten är svårläst och storleken fel

Eller om radavstånd, styckeavstånd eller radlängden inte är anpassad eller satt i relativa storlekar

Läsvänliga rader

Ger bättre läsflyt för dyslektiker och personer med eller utan andra funktionsvariationer. Riktmärket är 80 tecken per rad.

Typografi

  • Ha en tydlig och läsvänlig font, gärna sans-serif om det är webb.
  • Ha max 80 tecken per rad.
  • Ha 1,5 i radavstånd och 1,5 x radavståndet som styckeavstånd.
  • Använd relativa storlekar (em, rem eller %) på alla objekt så de kan växa om användaren ändrar storleken.

Länkar

Vilken länk är du mest intresserad av?

Här
Läs mer
Klicka här

Länktexten ska förklara vart länken går

Den ska inte vara beroende av sammanhanget utan kunna stå för sig själv. Hur vet användaren annars vart länken ta hen?

Syns mer!

Med tydliga länktexter får du också en bättre sökmotoroptimering. Din sajt kommer att visas högre upp i sökresultatet = nå fler.

Länkar

  • Skriv tydliga, beskrivande länktexter.
  • Särskilj länken tydligt (ex. med understrykning) från omgivande text.
  • Om länken öppnas i nytt fönster, informera användaren om det genom att skriva det i länknamnet.
  • En samling länkar läggs i en <ul> så användare med skärmläsare får veta länklistans omfattning.

Navigation

Har du tabbat dig?

alltid
en
samling
mask
i
större
Bär

Var det svårt att få ordning på innehållet när det placerades i fel ordning? Nu kommer texten i rätt ordning:

Bär
alltid
mask
i
en
större
samling

Se till att innehåll och navigation följer ett logiskt flöde för användaren så blir det lättare att förstå.

Tabba rätt med tabbtangenten

Det ska gå enkelt att tabba sig överallt utan att innehållet förvrängs. Visa var fokus är och testa så inte användaren råkar fastna någonstans.

Navigation

  • Kontrollera läsordningen, du ska kunna tabba dig genom ett logiskt linjärt flöde.
  • Använd rätt kodelement till rätt sak. Hoppa inte över någon rubriknivå.
  • Använd tabbindex 0 för att göra ett element fokuserbart (men aldrig över 0 för att styra tabbordningen!).
  • Dubbelkolla att du inte har råkat bygga en navigationsfälla!

Film

Hänger du med?

Följ instruktionen i filmen!

Vad hörde och såg du?

Med bakgrundssorl som överröstar filmljudet eller solljus som blänker i skärmen blir det svårt att engagera sig i filmen.

Med textning och ljudspår når du fler

80 % av alla som ser film i sociala medier gör det utan ljud. Med text ”hör” de vad du säger. Blunda och lyssna på en film. Med en berättarröst går det att ”se” vad som händer.

Film

  • Erbjud under­text eller trans­krip­tion till film och ljud­fil.
  • Berätta det som sker men inte sägs, använd separat ljudspår om det behövs mer tid för att beskriva gester eller en situation.
  • Trans­kription är döv­blindas möjlighet att ta till sig ma­terialet och ett bra hjälp­medel för alla som vill skanna innehållet.
  • Låt användaren styra play/­paus. Blinkningar och ani­ma­tioner kan ge epi­leptiska anfall och illamående.

Bilder

Alternativtext, bildtext eller textbild?

Informativa och funktionella bilder

Ska ha alternativtexter. Alltid. En informativ bild förmedlar information eller känslor med hjälp av en kort neutral beskrivning. En funktionell bild är en bild/ikon som du interagerar med. Beskriv funktionen, inte utseendet.

Kompletterande bildtext

Är synliga för alla och kompletterar alternativtexten genom att förklara hur bilden knyter an till omgivande innehåll.

Textbild = text i bild

Var försiktig med text i bild eftersom den inte går att anpassa, förstora eller höra med skärmläsare i png och jpg-format. Använd svg om du ska göra en textbild.

Bilder

  • Alla informativa och funk­tionella bilder ska ha alt-text.
  • En alt-text ska vara kort­fattad, kärn­full och neutral. Helst kortare än 150 tecken.
  • ”Nulla” ett img-element om det är dekorativt (alt="" eller role="presentation")
  • Alt-text för funk­tionella bil­der (ex. ikoner) ska beskriva funktionen, inte bilden.
  • Svg-element kan an­passas och nås av skärm­läsare. Om de ska vara en ren­odlad bild använd role=”img”.
Sidan uppdaterades 2021-11-14