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 andra språ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.

Symbol för teckenspråk

Symbol för information på teckenspråk. För licensinfo, se avsnittet om återanvändning av symboler i webbriktlinje R165.

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. Här på webbriktlinjer.se pågår experiment med en spelare där tolkning går att aktivera med knappar. Ytterligare exempel på infälld teckenspråkstolk på bild finns på TV4-tolken.

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.

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. Se sidan Följ standarder för tillgänglighet. Standarderna innehåller kriterier om 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.
  • 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="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) och
  • 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.


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 används det något vidare begreppet “tidsberoende media” (eng “time-based media”) som även innefattar ljudinspelningar utan bild, filminspelningar utan ljud, och annan “rörlig” media med eller utan interaktivitet. Till exempel spel och animationer. Kännetecknande för tidsberoende media är att de behöver återges i en lämplig takt, därav kopplingen till tid.

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 till denna riktlinje

Kommentarer (16)

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

  • Besökare 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.

  • Besökare skriver:

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

  • Besökare 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.

  • Erik skriver:

    Hej! Jag försöker hitta fakta gällande autoplay-funktionalitet. Själv har jag väldigt svårt för denna typ av implementation i de flesta fall då det oftast är irrelevant och upplevs störande. Youtube som exempel tillåter autoplay på inbäddad video men med förutsättningen att ljudet är avstängt. De flesta artiklar jag hittat beskriver autoplay som en mardröm (bland annat ur rent usabilityavseende där man fråntar besökaren kontroll) medan sociala medier agerar tvärtemot.

    Har scannat av både WCAG och webbriktlinjer men har svårt att hitta information. Hur ska man tänka och framförallt, hur ska man argumentera för/emot på bästa sätt?

    • Tommy Olsson skriver:

      Enligt WCAG 2.2.2 ska det åtminstone gå stoppa, pausa eller sänka ljudet på sådant innehåll. Helst ska man undvika att starta ljud eller rörelser automatiskt, och låta användaren välja. Vissa människor blir oerhört störda av rörelser och ljud, särskilt när det kommer oväntat.

  • Krister Vikström skriver:

    Hej! Vad gäller egentligen för video som vi publicerar på tex facebook och LinkedIn? Vi gör tex filmer/animeringar utan ljud som är mer textbaserade. Hur ska man syntolka det? Räcker det med att man använder textningsfunktionen på siterna, eller har ni andra förslag?

    • Elin Svensson skriver:

      Hej!
      11 § DOS-lagen säger att digital service som en offentlig aktör tillhandahåller via en tredjepartsplattform som aktören inte har kontroll över ska uppfylla lagkraven så långt det är möjligt. Det innebär att det innehåll man publicerar via plattformen ska göras så tillgängligt som plattformen medger: texter ska vara enkla vårdade och begripliga; bilder ska ha textekvivalenter (om det går); filmer ska ha textning och syntolkning (om det går), och så vidare. Att sakna ”kontroll” innebär att den offentliga aktören inte har någon möjlighet att styra eller kravställa plattformen och inte heller på något sätt finansierar den.

  • Sara Helperin skriver:

    I en utbildningsfilm från er ( https://youtu.be/LFRJ-SI0uJw ca 41:00) framgår att text i filmen som inte är undertexter utan grafik ska syntolkas eller läsas av berättarröst och då framgå av undertexter. Hittade inget på den här sidan om det, står det svart på vitt någonstans? Jag funderar också hur det är med filmer i sociala medier både filmer i flödet och annonsering, är de också bundna av syntolkning/uppläsning av text i bild (grafik inte undertexter)?

    • Elin Svensson skriver:

      Hej Sara!
      Angående syntolkning finns det två WCAG-kriterier som ska uppfyllas: WCAG 1.2.3 och 1.2.5. Allt relevant innehåll som visas i en film ska syntolkas. På sidorna ”Syntolka eller erbjud alternativ till videoinspelningar” och ” Syntolka videoinspelningar” finns med information.
      Vad gäller sociala medier ska en aktör göra följande: 11 § säger att digital service som en offentlig aktör tillhandahåller via en tredjepartsplattform som aktören inte har ”kontroll” över ska uppfylla lagkraven ”så långt det är möjligt”. Det innebär att det innehåll man publicerar via plattformen ska göras så tillgängligt som plattformen medger: texter ska vara enkla vårdade och begripliga;  bilder ska ha textekvivalenter/textalternativ (om det går); filmer ska ha textning och syntolkning (om det går), osv.

    • Elin Svensson skriver:

      Hej!
      Generellt kan sägas att syftet med syntolkning ju är att någon som inte tar del av filmens innehåll via syn får det uppläst, och kan ta del av informationen via hörsel istället. Om det förekommer relevant text i en film måste syntolkningen förmedla samma information. Syntolkningen behöver inte vara textad, eftersom den inte tillför någon information som inte också framgår visuellt. . Kravet på syntolkning framgår av kriterium 1.2.5 i WCAG 2.1: https://www.w3.org/TR/WCAG21/#audio-description-prerecorded. För innehåll som tillhandahålls av en offentlig aktör via en teknisk lösning som står under tredje parts kontroll (exempelvis sociala medier), ska innehållet följa tillgänglighetskraven så långt det är möjligt.


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)