Tillgänglighet

Information och tjänster ska kunna användas av alla människor oavsett funktionsvariation, detta gäller även på webbplatser.

Checklista - Tillgänglighet för redaktörer

Struktur och innehåll

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

Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare.
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.

Stäm av ordningen i mobilläge

Responsiv design, som anpassar presentationen baserat på skärmstorlek, kan påverka ordningen. Därför ska man alltid kolla sin sida i mobilläge, så att den logiska ordningen inte bryts. Använd SiteVisions förhandsgranskningsläge "Responsivt läge" för att se hur sidan ser ut i mobil.

Rubriker

Använd rätt rubriknivå genom att formatera rubriker

Informationen presenteras korrekt oavsett mottagarens verktyg, om vi använder rubriknivåerna på rätt sätt. Det underlättar även för sökmotorer att läsa av innehållet på webben på rätt sätt. Använd alltid rubriksnivåerna när du vill göra nya stycken.

  • Använd rubriknivå 1 för huvudrubriken på sidan.
  • Använd rubriknivå 2 för underrubriker till rubriknivå 1.
  • Använd rubriknivå 3 för underrubriker till rubriknivå 2 osv.

Exempel på rubriknivåer:

Djur (rubriknivå 2)

Hund (rubriknivå 3)

Collie (rubriknivå 4)

Katt (rubriknivå 3)

Ange tydliga informativa rubriker

Tydliga beskrivningar är bra för alla användare, men framför allt för personer som har lässvårigheter och försämrat korttidsminne eftersom det ger det en möjlighet att förutse vad varje del av webbplatsen innehåller. För personer som navigerar med tangentbordet och/eller använder skärmläsare ger det en möjlighet att hoppa till olika delar av innehållet.
  • Använd nyckelord ur texten.
  • Skriv de viktigaste orden först.
  • Använd aktivt språk, gärna verb.
  • Gör inte rubrikerna längre än 5-10 ord.

Om du ofta producerar liknande innehåll på flera olika sidor, exempelvis som våra programsidor, då är det bra att vara konsekvent och återanvända samma struktur över alla sidor.

Undvik fetstil och kursiv formatering

Fetstil och kursiv formatering för rubriker och texter är svårläst för besökaren och ska inte användas som formatering. Textformateringarna som finns att välja på innehåller fetstil formatering i ett fåtal fall där det har bedömts tillgängligt och lämpligt. 

Länkar

Länkar som går att förstå

Formulera tydliga länktexter som talar om vart länken leder. Då underlättar du för dina användare och hjälper dem att hitta rätt.

  • Undvik uttryck som ”klicka här…”, "läs mer här", "följ länken...", "gå till..." eller "mer om...". Användare vet att det går att klicka på länkar, det behöver du inte tala om.
  • Länka hela raden med text för att göra länkytan/träffytan så stor som möjligt.
  • Utforma länken tydligt så att den går att skilja från andra texter.
  • Undvik länkar inne i brödtexten.
  • Formulera länken så att det är lätt att förstå vart den leder. Betrakta länktexten som en rubrik till den länkade sidan. Använd gärna rubriken på målsidan.
  • Formulera länken så att besökaren ser VAD som ska hända, t.ex. att man kommer till en ny webbplats eller att ett program öppnas för att visa en fil.
  • Stryk ord som inte tillför något.
  • Ange egna rubriker för länkar, eller en särskild länkpil när vi lägger länkar mellan textstycken.

Internlänkar till sidor i vår webbmiljö:

Internlänkar används när du ska länka till en annan sida som finns på webbplatserna i vår webbmiljö på ju.se, studentwebben, bibliotekets webbplats, centerwebbarna eller intranätet. Använd internlänk i SiteVision och välj sidan som du vill länka till. Internlänkar ska inte öppnas i nytt fönster.

Exempel på text till internlänkar:

Externlänkar till andra webbplatser:

Externlänk används när du ska länka till en annan webbplats. Använd externlänk i SiteVision och klistra in adressen till den webbplats du vill länka till. Externa länkar ska öppnas i nytt fönster.

Exempel på text till externlänkar:

Länkar till dokument

Det är oftast bäst för användarna om du kan lägga ut information i form av en webbsida i stället för att stänga in den i ett dokument. Ibland kan det dock vara nödvändigt att lägga ut dokument, exempelvis långa rapporter eller dokument som är designade för att skrivas ut, som checklistor. Se avsnittet Filer/PDF:er i checklistan för fler riktlinjer för dokument på webben.

  • Ange dokumentets format: pdf, docx eller något annat. Då blir det tydligare att länken inte går till en webbsida.
  • Filens storlek bör framgå av länktexten. Då kan besökarna lättare avgöra hur lång tid det tar att ladda ner dokumentet.
  • Länkar till filer och dokument ska öppnas i nytt fönster.

Exempel på länkar till dokument:

Länkar till e-postadresser

Välj hellre modulen Kontaktinformation för att visa information till en kontaktperson än att skriva ut e-postadressen i text på sidan. Behöver du ändå lägga till information om e-postadresser så skriv ut hela adressen och länka den genom att använda "Email address" i SiteVision.

Exempel på länk till e-postadress:

Dåliga exempel, gör inte så här:

Bilder

Allmänt om bilder

Som regel ska en bild tillföra något. Om du inte har bilder som inte tillför till innehållet borde du ställa dig frågan om du verkligen ska ha bilder på sidan.

Välj bilder och visuella komponenter som har goda kontraster

Välj bilder och visuella komponenter som har goda kontraster.

Ange beskrivande text för bilder (alt-texter)

När du pekar ut bilden från SiteVision, ange en beskrivande text för bilden via fältet "Specify custom". Skriv texten på svenska på svenska sidor och på engelska på engelska sidor. 

  • Avsluta beskrivningen med en punkt.
  • Vid illustration, skriv ordet illustration sist.
  • Varje bild i ett bildspel ska ha en egen
    bildbeskrivningstext.
  • Benämn färger om det är relevant för läsaren.

Bildbeskrivningstexten berättar vad vi ser i bilden. Gör texten så meningsfull som möjligt och beskriv händelsen.

Beskriv vad vi ser på bilden:

  • En kvinna pratar med studenter.
  • En grupp studenter får pris och många människor tittar på.
  • En grupp människor står på campus och sjunger.

Eller ännu hellre beskriv händelsen i bilden:

  • Rektor Agneta Marell pratar med studenter på campus.
  • Vinnarna av Entrepreneurship challenge står samlade med plakat i hand.
  • JU:s akademiska kör sjunger vårsånger på campus.

Ord som inte ska finnas där:

  • Fotografens namn.
  • Sidans titel.
  • Nyckelord eller begrepp för ämnet men som inte syns i bild.
  • Ordet foto eller bild.

Organisationsbilder och diagram

Organisationsbilder, diagram eller liknande är svåra att beskriva i text. Komplettera dessa bilder med en tillgänglig pdf. Skriv det i bildbeskrivningen.

Dekorationsbilder

Nej, ett foto är aldrig en dekorationsbild, men om det finns en bra bildtext kan man markera den som dekoration ändå. Bildtext skrivs i fältet "Image caption".

Texter i bilder

Bilder ska inte innehålla texter. Om det finns text i bild måste texten skrivas in i bildbeskrivningen alternativt att bilden finns som tillgänglig pdf (skrivs i bildbeskrivningen). Text i bild kan ibland också klassas som en ikon och är då undantagen.

Text i bild innebär ofta flera problem

  • Texten kan inte läsas upp i läsverktyg för t.ex. blinda eller dyslektiker.
  • Texten blir inte sökbar, varken i vår egen sök eller hos sökmotorer.
  • Om färgerna är fel kan färgblinda inte läsa texten.
  • Om en seende men synsvag person förstorar sidan kan texten bli oläslig eftersom den blir suddig/pixlig.
  • Otillräcklig kontrast mellan text och bakgrund kan göra texten svårläslig, framför allt för människor med svag syn.

Filer/PDF:er

Allmänt om filer/PDF:er

Texten i en PDF ska kunna läsas upp i uppläsningsverktyg (finns flera modeller) eller punktskriftsdisplay. Bildscannade texter är förbjudna!

  • Bilder ska ha ett textalternativ.
  • En längre text ska ha bokmärken, det vill säga att rubriker ska vara taggade som rubriker.
  • Kontraster ska vara goda
  • Säkerställ tydliga och klickbara länkar
  • Säkerställ en logisk innehållsstruktur och formaterade rubriker

Använd Acrobat Pro för att tillgänglighetsanpassa PDF:er

Så här gör du för att kontrollera tillgängligheten i din PDF i Adobe Acrobat Pro:

  1. I Adobe Acrobat Pro: Välj "Verktyg" så hittar du ikonen som heter Tillgänglighet.
  2. Tryck ”Lägg till” och sen ”Öppna”.
  3. Välj sedan din PDF.
  4. Tryck sedan på ”Fullständig kontroll” och ”Börja kontroll” på rutan som dyker upp.

Tillgänglighetsanpassa äldre dokument på webben

Dokument som publicerats före den 23 september 2018 är undantagna tillgänglighetskraven. Undantag från detta är äldre filer som behövs för att ”genomföra aktiva administrativa förfaranden”, det vill säga blanketter eller nödvändiga instruktioner. Dessa behöver tillgänglighetsanpassas.

Tillgänglighetsanpassa PDF:er från InDesign

  • Lägg till länk till instruktion!

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.

  • Publicera i första hand dokument i standardformatet html. Då kan användarna komma åt er information utan att använda en viss datorplattform, eller ett program som kostar pengar, till exempel Word.
  • Om ni har dokument i andra format än html, sammanfatta dem som text på webbsidan, så att användarna kan bedöma innehållet utan att ladda ner det.
  • Utforma dokument så att de enkelt kan läsas på skärm. Då bidrar ni till att färre användare skriver ut på papper.
  • Om ni använder pdf:er, se till att de skapas så att de blir tillgängliga.

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.
  • Var särskilt försiktig med färgerna grön, röd och brun. Många personer med färgblindhet har svårt att särskilja dessa. Röd brukar indikera felmeddelanden och grönt brukar indikera att allt gick bra (success).

Tabeller

Allmänt om tabeller

Undvik tabeller, men om du måste ha en så se till att den är rätt uppställd med tabellrubrik och kolumnrubriker.

Filmer och videor

Allmänt om filmer

Förinspelad tidsberoende media som offentliggjorts före 23 september 2020 är undantagna tillgänglighetskraven.

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 ska en textversion erbjudas.

Kravet är under utredning av kommunikationsavdelningen.

Instruktioner

Gör inte instruktioner beroende av sensoriska kännetecken

Istället för en instruktion, kan det ibland vara bättre att länka direkt till sidan där informationen finns. Instruktioner behöver också fungera både för desktop och mobil.

Använd gärna sensoriska kännetecken (färg, form med mera) för instruktioner eftersom det kan vara en effektiv metod för att underlätta för användarna, inklusive personer med kognitiva begränsningar, men kom ihåg att komplettera informationen så att alla kan förstå den.

Exempel:

  • På dator: Sök genom att använda det gråa rektangulära fältet som heter “Ange sökord” uppe till höger.
  • I mobil: Sök genom att tryck på den gråa rutan med det vita förstoringsglaset uppe till höger.

Instruktion i hjälptext i webbundersökning

Navigering i en webbundersökning som sträcker sig över flera sidor används ofta pilar för att markera att användaren kan klicka sig framåt och bakåt i undersökningen:

Om instruktionen till användarna är ”Gå till nästa sida genom att klicka på den gröna pilen med texten ”Nästa sida” i nedre högra hörnet”, används både positionering, färg och tydlig markering på ikonen för att vägleda användarna framåt i undersökningen.

Hänvisning till höger eller vänster

Hänvisa till information som ligger till höger eller vänster behöver den också kompletteras med ytterligare information. Ett sätt att göra det skulle kunna vara att hänvisa till rubriken: "Vill du veta mer om ämnet x, hittar du länkar till fördjupningar i listan till höger under rubriken Relaterat."

Var dock försiktig med hänvisningar till höger eller vänster eftersom de ofta inte gäller när användaren surfar på en mobiltelefon. Det som ligger till höger/vänster på en desktop hamnar ofta under eller över i mobiltelefonen.

Hänvisningar ovan eller under

På många språk, inklusive svenskan, är det underförstått att ”ovan” är en hänvisning till innehåll som förekommit tidigare i en text, och ”nedan” avser innehåll som kommer efter.

Om det är otvetydigt till vilken del av sidan en sådan hänvisning pekar kan en hänvisning som ”välj en av länkarna nedan” eller ”såsom nämndes ovan” mycket väl fungera enligt riktlinjen.

Knappar och funktioner

Benämn funktioner konsekvent

  • Konsekvent benämning av saker på hela webbplatsen underlättar för alla användare att känna igen sig och minskar onödig kognitiv belastning.
  • Detta gäller ikoner och element med samma funktion (som knappar).
  • Ikoner har ni troligtvis begränsade möjligheter att påverka som redaktörer men texten på knappar kan ni sätta. Gäller även era olika formulärslösningar.
  • Vanliga termer bör bestämmas hur de ska skrivaroch återanvändas globalt över hela siten.

Kravet är under utredning av kommunikationsavdelningen.

Sidan uppdaterad 2020-04-29

Sidan uppdaterad 2020-04-27