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

Förutom lagkrav så som EU:s webbdirektiv finns många fördelar med att ha en webbplats som är anpassad för alla. Nedan har vi listat några av dem:

Checklista - Tillgänglighet för redaktörer

Struktur och innehåll

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

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)

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.

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

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

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

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

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, diagram eller liknande är svåra att beskriva i text. Komplettera dessa bilder med en tillgänglig pdf. Skriv det i bildbeskrivningen.

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

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

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

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

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

Inspelad digital video ska ha undertexter (kallas även textbeskrivningar eller textremsa) och för ljudinspelningar (till exempel podcasts) med mera ska en textversion erbjudas.


Ska filmer som publiceras efter livesändningar textas?

Ja, allt material som publiceras efter en direktsändning räknas som en inspelning och är därmed inte undantaget från textningskraven. Tvåveckorsregeln är till för material som kommer att textas. Det är alltså inget undantag för att kunna publicera livesändningar utan text under en två veckorsperiod. 


Texta filmer som publiceras på YouTube

För filmer som är publicerade på YouTube kan ni använda er av verktyg för att automattexta filmen, så som textamig.se (YouTube har ännu ingen egen automattextning för svenska).


Kvaliteten på textningen från textamig.se kan variera på grund av ljudkvalitet, dialekter och svåra ord så man behöver göra en manuell kvalitetssäkring/översyn av automattextningen i efterhand. Om det bedöms som oerhört betungande att kvalitetssäkra textningen av filmen (om filmen är flera timmar lång) kan man åberopa undantag för oskäligt betungande anpassning enligt 12 paragrafen i DOS-lagen, men du behöver ändå säkerställa att filmen är textad med hjälp av automattextning.


Så här automattextar du filmer på YouTube:

  1. Ladda upp filen på YouTube och kopiera adressen till filmen
  2. Länka till filmen på https://www.textamig.se så genererar webbplatsen en textningsfil för filmen
  3. Öppna mejlet med textningsfilen från textamig.se
  4. Kvalitetssäkring: Spara ner och öppna textningsfilen i Anteckningar/Notepad (använd inte Word eller annat textningsprogram då dessa program skickar med formateringar vilket gör att filen inte går att läsa på rätt sätt).
  5. Se över innehållet och rätta ord/meningar som har blivit fel. Jämför med vad som sägs i filmen.
  6. Spara filen i samma filformat som du fick från textmig.se (dintextningsfil.srt) Spara den först som .txt och därefter ändra ändelsen på filen i mappen till .srt.
  7. Ladda därefter upp textningsfilen kopplat till din film på YouTube och säkerställ att det ser bra ut. Guide för hur du laddar upp undertexter på YouTube:

Så här automattextar du filmer på JU Play/Kaltura

  1. Kopiera ID:t från din video från länken i JU Play (kopiera texten efter det sista /. Exempelvis: play.ju.se/media/YourVideo/0_p10720oa8). Säkerställ att videon inte är privat.
  2. Klistra in ID:t efter entry_id/ i följande länk (textamig.se kan bara förstå den här länken) https://api.kaltura.nordu.net/index.php/extwidget/preview/partner_id/324/uiconf_id/23450107/entry_id/ Din länk borde se ut så här med rätt ID inlagt: https://api.kaltura.nordu.net/index.php/extwidget/preview/partner_id/324/uiconf_id/23450107/entry_id/0_ry6fn0fr)
  3. Kopiera den nya länken och klistra in den på www.textamig.se för att få textningsfilen via mejl (kommer som en .srt-file) efter ett par minuter.
  4. Kvalitetssäkring: Spara ner och öppna textningsfilen i Anteckningar/Notepad (använd inte Word eller annat textningsprogram då dessa program skickar med formateringar vilket gör att filen inte går att läsa på rätt sätt).
  5. Spara filen i samma filformat som du fick från textmig.se (dintextningsfil.srt) Spara den först som .txt och därefter ändra ändelsen på filen i mappen till .srt.
  6. Ladda upp textningsfilen via MyMedia i JU Play.

Instruktioner

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

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