Riktlinje nr 113 Prio 2

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.


Rekommendationer för tillgänglig videoLänk hit

  • Använd gärna video.
  • Använd undertexter.
  • Erbjud syntolkning eller se till att viktig information framgår av ordinarie ljud.
  • Erbjud översättningar (till exempel till svenskt teckenspråk) vid behov.
  • Använd videospelare med bra tillgänglighet.
  • Begränsa blinkande för att inte orsaka krampanfall.
  • Ställ krav på tillgänglighet när ni upphandlar videoproduktion.
  • Planera produktionen med hänsyn till tillgänglighet.


Använd gärna videoLänk hit

Många gånger kan det vara lättare att ta till sig innehåll i en video än om motsvarande information skulle finnas i en längre text. Använd gärna video som komplement till textbaserad information för att nå personer som har svårt att läsa eller inte kan läsa men som förstår talspråk med stöd av visuell information.

Den här riktlinjen handlar om hur video kan göras tillgänglig för så många människor som möjligt, oberoende av t.ex. funktionsnedsättning. Det är en av flera riktlinjer om video och annan rörlig media på webben.

Använd undertexter

Digital video ska i princip alltid ha undertexter.

Se R117. Texta inspelad rörlig media (video, ljud, animationer…) och R119. Texta direktsändningar

Erbjud syntolkning eller se till att viktig information framgår av ordinarie ljud

Ordna med syntolkning om det behövs för att personer med begränsad syn ska kunna ta del av videoinnehåll.

Se R120. Syntolka videoinspelningar.

Erbjud översättningar (till exempel till svenskt teckenspråk) vid behov

Videomaterial kan textas på fler än ett språk, och det går även att lägga in alternativa ljudspår (kallas ibland dubbning) eller fälla in en teckenspråkstolk i bild.

Organisationens uppdrag och målgruppernas behov bör avgöra vilka översättningar ni erbjuder. Läs mer om minoritetsspråk och översättningar i R13. Ge information på svenskt teckenspråk, R14. Ge information på de nationella minoritetsspråken och R15. Ge information på engelska och andra språk.

svensk symbol för information på teckenspråk, och amerikansk symbol för teckenspråkstolkning
Symboler för information på teckenspråk. För licensinfo, se avsnittet återanvändning av symboler.

Teckenspråksfilm bör vara av HD-kvalitet, och erbjuda möjlighet till helskärmsläge.

Sveriges Dövas Riksförbund (SDR) har publicerat rekommendationer om teckenspråksfilmer på webbsidor, som bland annat innehåller förslag på kravprofil för upphandlingar.

På Malmö stads videoportal finns exempel på en video där användaren kan välja att slå på och av både teckenspråkstolkning och textning. Filmen finns översatt till en rad olika språk som användaren kan välja att visa.

Använd videospelare med bra tillgänglighet

I takt med att webbläsare får bättre stöd för html5 kommer förhoppningsvis en tillgänglig videospelarfunktion automatiskt användas för presentation av innehåll som infogas med hjälp av html-elementet video. Men än så länge brister tyvärr tillgängligheten i många webbläsares implementation av html5-video. Det kan handla om att användaren inte kan navigera i spelaren med hjälp av tangentbord eller använda den med skärmläsare, eller att textspår inte kan visas. Därför kan man behöva använda tilläggskod (oftast bestående av JavaScript och css, och möjligen komplettera med länk till nedladdningsbar fil på standardformat). Det finns många olika videospelare att välja bland.

Använd om möjligt relativa mått (till exempel i procent) för att ange videospelarens bredd. Publikationen CSS-tricks beskriver hur detta kan åstadkommas med några vanliga videotjänster. Om bredden anges med fasta pixlar riskerar webbplatsens responsivitet att brytas. Det är tyvärr ganska vanligt

Många organisationer abonnerar på videoplattformar från externa leverantörer. I dessa fall gäller det förstås att ställa motsvarande krav på tillgänglighet vid upphandling.

Ibland fungerar det bra att bädda in (på engelska: embed) video från någon gratis distributionsplattform, men tillgängligheten i sådana spelare varierar och ofta innebär det att användarens intresse kartläggs av tredje part med hjälp av kakor med mera. Läs mer om tredjepartsinnehåll i R67 Se till att infogade externa tjänster följer webbriktlinjerna.

Många olika exempel på tillgängligt videoinnehåll och hur det kan presenteras (och kodas) finns på demonstrationssidor från Ableplayer.

Begränsa blinkande för att inte orsaka krampanfall

Se R133. Orsaka inte epileptiska anfall genom blinkande.

Ställ krav på tillgänglighet när ni upphandlar videoproduktion

Det är viktigt att ställa krav på tillgänglighet vid upphandlingar, eftersom många vägval avgörs just i detta skede. Förändringar i upphandlingslagarna gör att det från 2017 dessutom är lagkrav på detta. Många produktionsbolag är fortfarande ovana vid krav på tillgänglighet vid videoproduktioner, men tydlig efterfrågan på t.ex. textning och syntolkning bör leda till ökad kunskap och lägre priser.

Använd alla relevanta webbriktlinjer, inte bara denna, när du ställer krav vid upphandling för webbvideo. Särskilt R1. Följ WCAG 2.0 nivå AA som ju även har konsekvenser för till exempel kontraster i textplattor som kan förekomma som en del av filmerna.

Samma sak gäller förstås vid upphandling av videoplattform.

Planera produktionen med hänsyn till tillgänglighet

Om ni tar hänsyn till tillgänglighet redan på planeringsstadiet kan resultatet med ganska små åtgärder bli betydligt mer inkluderande.

Tips för att ta fram ett bra manus:

  • Låt personerna i filmen presentera sig. Då kan en person som använder hörseln för att uppfatta videon koppla rösten till namnet och har på så vis lättare för att skilja på personerna i videon.
  • Byt inte kläder på personer i filmen i onödan. Genom att till exempel låta en person behålla samma tröja genom hela filmen blir det enklare för flera kategorier av tittare att hålla reda på vem som är vem.
  • Presentera händelser med hjälp av en berättarröst och lägg in saker i handlingen som gör att man kan förstå filmen utan att behöva se bilderna. Prova gärna sedan själv att blunda och titta på filmen. Finns det viktig information som förloras?
  • Tänk igenom de olika ljudmiljöerna och fundera över vilka ljud som behöver förstärkas och vilka som kanske ska tas bort. Tänk på att inte dränka viktiga miljöljud med musik. Miljöljuden ska helst höra ihop med bilderna och föra berättelsen framåt.
  • Använd kontrast och färg konsekvent.

Fördjupning om webbvideoLänk hit


Exempel på kod för tillgänglig webbvideoLänk hit

Exakt hur din video bör infogas i en webbsida beror på vilka komponenter den består av, vilken html-version du använder (se rekommendationer för att välja standard (R81)), vilken videospelare du använder, hur javascript används med mera.

Här kommer ett exempel som visar hur det kan se ut i html5 för att infoga en film med stängda undertexter på svenska och engelska (där den svenska är uppdelad på två filer – en som innehåller den talade dialogen och en som beskriver andra viktiga ljud). Dessutom finns länkar för den som inte kan spela upp innehåll i webbsidan men önskar ladda ner det. Audio-elementet med syntolkning som ligger sist behöver kopplas till videofilmen med hjälp av javascript (som inte finns med här).

<video width="1100" height="800" poster="statisk_bild.jpg"
controls="controls" preload="none" title="Beskrivning av film">
<source type="video/mp4" src="videofil.mp4" />
<track src="dialogundertext.vtt" kind="captions"
srclang="sv" default label="Svenska" />
<track src="engelska.vtt" kind="subtitles" srclang="en" label="English" />
<track src="textbeskrivningar.vtt" kind="metadata"
kind="transcript" srclang="sv" label="Beskrivningar" />
Din webbläsare verkar inte kunna visa upp filmen.
<a href="videofil.mp4">Ladda ner filmen</a>
</video>
<audio preload="none" controls="controls" title="Ljudinspelning med syntolkning av filmen">
<source src="syntolkning.mp3" type="audio/mp3"/>
Din webbläsare verkar inte kunna spela upp syntolkningen.
<a href="syntolkning.mp4">Ladda ner syntolkningen</a>
</audio>
<a href=”tecken.html”>Version med tolkning till svenskt teckenspråk</a>

För den som använder äldre html-versioner kan tillgängliga mediealternativ synkroniseras med hjälp av smil-standarden.


MätbarhetLänk hit

Gör en expertgranskning eller användningstester för att säkerställa att riktlinjen uppfylls.

Kontrollera även att det går att använda tangentbordet för att

  • Tabba sig fram till videospelaren.
  • Kontrollera uppspelningen med tangentbordet (och att det är tydligt hur man gör).
  • Ta sig från videospelaren till det övriga innehållet med hjälp av tangentbordet.

Du kan också blunda och lyssna på filmen. Går viktig information förlorad?

Riktlinjen om flimmer går att testa med automatiska verktyg, men oftast räcker en manuell bedömning.


Återanvändning av symbolerLänk hit

Om samma symboler används av många kan det underlätta förståelse. Överväg därför gärna att använda någon av de ikoner vi presenterat här, snarare än att hitta på en egen. Men kom ihåg att symboler, även om de är standardiserade, alltid bör kombineras med motsvarande information som text. Och glöm inte bort att det kan finnas upphovsrättsligt skydd för symbolerna.

symboler för textning
Symbolen för textning som innehåller bokstäverna ”cc” är licensbefriad, den med  ”T” tillhör SVT och får användas fritt. Subtitles-symbolen kommer från Google som publicerat den under Apache License Version 2.0, vilket i stora drag innebär att den är fri men inte får säljas vidare.

symboler för syntolkning
Symbolen för syntolkning som innehåller bokstäverna ”AD” är licensbefriad och den som består av ett öga med tre bågar tillhör SVT och får användas fritt.

svensk symbol för information på teckenspråk, och amerikansk symbol för teckenspråkstolkning
Symbolen för teckenspråkig information finns att ladda ner fritt i flera olika format hos SDR och är standardiserad av SIS. Den andra bilden visar en amerikansk symbol för teckenspråkstolkning som är licensbefriad.


TerminologiLänk hit

Vi använder här uttrycken “video”, “film”, “onlinevideo” och “webbvideo” omväxlande för all form av digital rörlig bild med ljud. I WCAG 2.0 används det något vidare begreppet “tidsberoende medier” (eng “time-based media”) som även innefattar ljudinspelningar utan bild, filminspelningar utan ljud, och andra “rörliga” medier med eller utan interaktivitet. Till exempel spel och animationer. Kännetecknande för tidsberoende medier är att de behöver återges i en lämplig takt, därav kopplingen till tid.

Syntolkning heter audio description på engelska.

För textremsa används på webben ofta formatet WebVTT (Web Video Text Tracks), men det finns även andra filformat för lagring och överföring av textning till video.

OVP är en förkortning av online video platform, det vill säga videoplattform.



Kommentarer (9)

  • Björn Hagström skriver:

    Funderar på om det under ”Använd undertexter” bör nämnas att video ibland spelas upp automatiskt när de sprids på vissa sociala medier och om man då har ljudet avstängt är det bra om man har en möjlighet att uppfatta innehållet. Det kan leda till att fler väljer att ta del av hela innehållet.

    • Pär Lannerö skriver:

      Tack Björn.
      Att många har ljudet avstängt framgår av formuleringen ”Många tittar också på videoinnehåll med ljudet avslaget, till exempel för att de inte vill störa personer i omgivningen eller saknar fungerande högtalare/hörlurar.”

      Stängs ljudet automatiskt av vid automatisk uppspelning?

      • Björn Hagström skriver:

        Ja såg det. Tänkte dock att det är lätt att avfärda med att det nog inte är så vanligt att man väljer att titta på video med ljudet avstängt. Exemplet med sociala medier skulle vara för att visa på ett konkret exempel och på så sätt få bättre acceptans för det. Det är lättare att relatera till då många nog varit i den situationen själva.

  • Emelie skriver:

    Jag funderar precis i detta nu på undertexter – vilka krav det finns på dem. måste det till exempel vara en svart ”ruta” som textbakgrund eller räcker det att texten har en viss svart rand runt sig?

    • Pär Lannerö skriver:

      WCAG ställer ju krav på kontrast, och har du en svart rand runt så borde kontrasten bli OK.
      Men i praktiken vet jag inte vad som fungerar bra. Den som vet får gärna fylla på med kommentar eller hänvisning.

  • Lennart Borgman skriver:

    Kan ni lägga till vad diskrimineringslagen säger om textning (på svenska)?

  • Ingegerd Johansson skriver:

    Hur ska en undertext se ut när den avser en persons tankar?
    Finns det riktlinjer för hur undertexter ska se ut?
    Har sett att vissa färgsätter texten för att markera skillnaden från tal i filmen.