Video, ljud och rörelse i webbutiken: textning och paus

Det här är teknisk vägledning och inte juridisk rådgivning. Hur tillgänglighetslagen ska tolkas i ditt fall avgör Post- och telestyrelsen (PTS), så vänd dig dit vid osäkerhet.

Produktvideor, kampanjfilmer och karuseller på startsidan är de delar av en webbutik som oftast rör sig eller låter av sig själva. Sex WCAG-kriterier styr dem: 1.2.2, 1.2.3, 1.2.5, 1.4.2, 2.2.2 och 2.3.1. Kriteriesidorna förklarar varje krav kort. Här går vi igenom hur man gör i praktiken. Allmänt om hur man testar en butik finns i Så testar du din webbutik mot WCAG 2.1 AA själv.

Kriterienamnen nedan är hämtade ur W3C:s svenska översättning av WCAG 2.0. Beskrivningarna av kraven bygger på W3C:s Understanding-sidor för WCAG 2.1 och är sammanfattade av oss, inte översatta ordagrant.

Produktvideo med tal

Textning, 1.2.2 Textbeskrivningar (Förinspelade), nivå A. Kravet är att förinspelat ljud i en film har textning. Undantaget gäller film som bara är ett alternativ till text som står bredvid och som är tydligt märkt så. Textningen ska återge det som sägs, vem som talar och de ljud som behövs för att förstå filmen, enligt W3C. En film helt utan ljud omfattas inte.

Automatisk textning från en videotjänst är ett utgångsläge, inte en färdig lösning. Läs igenom den och rätta produktnamn, mått och facktermer innan filmen läggs ut. Spelar du upp filmen i ett eget videoelement kopplar du textningen med elementet track:

<video controls preload="metadata" poster="/bilder/montering.jpg">
  <source src="/video/montering.mp4" type="video/mp4">
  <track kind="captions" src="/video/montering.sv.vtt" srclang="sv" label="Svenska" default>
</video>

Filen med textningen är en vanlig textfil i formatet WebVTT. Ett påhittat exempel på två rader:

WEBVTT

00:00:01.000 --> 00:00:04.000
Börja med att skruva fast sidostyckena.

00:00:04.500 --> 00:00:07.000
[Ett klick hörs när låset går i]

Ljudbeskrivning eller textversion, 1.2.3 Ljudbeskrivning eller mediealternativ (Förinspelat), nivå A. Det som bara syns i bild ska nå dem som inte ser den. Du väljer själv: en ljudbeskrivning, eller en textversion som återger både det som sägs och det som visas, i samma ordning som i filmen.

Ljudbeskrivning, 1.2.5 Ljudbeskrivning (förinspelad), nivå AA. På den här nivån räcker inte textversionen, det ska finnas en ljudbeskrivning. W3C anger ett undantag: om all viktig information i bilden redan sägs i ljudspåret behövs ingen extra beskrivning. Det enklaste sättet att klara kravet är därför att manuset för filmen låter rösten säga det som visas. ”Dra ut den gröna spaken” går att följa utan bild, ”dra ut den där” går inte det. Pris, rabattkod och sista dag som bara står som text i bilden hör till det som behöver sägas högt eller finnas i en textversion.

Ljud och film som startar själv

1.4.2 Kontroll av ljud, nivå A. Spelas ljud automatiskt i mer än tre sekunder ska det finnas ett sätt att pausa eller stoppa det, eller en volymkontroll som fungerar oberoende av datorns eller mobilens volym. Att kunden kan sänka volymen i systemet räknas inte. Skälet är att skärmläsare delar ljud med sidan, så den som lyssnar på en uppläst sida får inte höra den om en kampanjfilm spelar högt.

Lösningen är nästan alltid att inte starta ljud av sig självt. En bakgrundsfilm utan tal eller musik kan ha attributet muted:

<video autoplay muted loop playsinline aria-hidden="true">
  <source src="/video/bakgrund.mp4" type="video/mp4">
</video>

Observera att en tyst bakgrundsfilm som rör sig i mer än fem sekunder ändå omfattas av 2.2.2 nedan. Därför behöver den en pausknapp, och det gäller även om du har tagit bort ljudet.

Vårt gratistest har en regel som heter autoplay. Den flaggar ljud eller video med attributet autoplay där muted saknas. Regeln är en tidig varning: den ser bara attributen i koden, och hittar inte ljud som startar via skript.

Karuseller och rörligt innehåll

2.2.2 Paus, Stopp, Dölj, nivå A. Rörelse, blinkning eller rullning som startar automatiskt, pågår i mer än fem sekunder och visas bredvid annat innehåll ska kunna pausas, stoppas eller döljas. Information som uppdateras automatiskt ska dessutom gå att pausa, stoppa eller dölja, eller så ska användaren kunna styra hur ofta den uppdateras. För sådan information finns ingen femsekundersgräns. Undantaget är rörelse som är en nödvändig del av en aktivitet.

W3C nämner inte karuseller i sin text, men en bildspelskarusell som byter bild av sig själv är automatiskt uppdaterad information. Det är vår tolkning att den behöver en kontroll. Tänk på följande:

• Pausknappen ska gå att nå och använda med tangentbord, och ha ett namn som en skärmläsare kan läsa.
• Låt pausen bestå tills kunden själv startar bildspelet igen, inte bara medan muspekaren eller fokus ligger på karusellen. Det är vår rekommendation: W3C:s text kräver att det går att pausa, stoppa eller dölja, inte mer.
• Har sidan flera saker som rör sig är en gemensam knapp bättre än en knapp per sak, anser W3C.
• Det enklaste är en karusell som inte byter bild själv, med pilar och punkter så att kunden bläddrar i egen takt.

<button type="button" id="karusell-paus" aria-pressed="false">
  Pausa bildspelet
</button>

Knappen kopplas till skriptet som byter bild, och texten byts till ”Spela upp bildspelet” när den är nedtryckt. En rullande banderoll med erbjudanden löses på samma sätt, eller genom att texten får stå still.

Blinkande innehåll

2.3.1 Tre flimmer eller under tröskelvärde, nivå A. Sidan får inte innehålla något som blinkar mer än tre gånger under en sekund, om det inte ligger under tröskelvärdena för vanligt flimmer och rött flimmer. Snabbt flimmer kan utlösa epileptiska anfall, och kravet gäller därför hela sidan.

Ett flimmer är enligt W3C ett par motsatta ljushetsförändringar. Tröskelvärdet gäller bland annat ytan: de blinkande ytorna får tillsammans täcka högst 25 procent av ett synfält på 10 grader. W3C uppskattar det synfältet som en rektangel på 341 x 256 pixlar på en skärm på 1024 x 768 pixlar. Gränserna är svåra att mäta för hand. Ha därför inga blinkande rea-etiketter, och titta extra noga på kampanjfilmer med snabba klipp och blixtar.

Gammalt material och lagen

Lag (2023:254) om vissa produkters och tjänsters tillgänglighet trädde i kraft den 28 juni 2025. Övergångsbestämmelse 2 säger att lagen inte tillämpas på innehåll på webbplatser och mobila applikationer som avser ”förinspelade tidsberoende medier som har offentliggjorts före ikraftträdandet”.

Det betyder att en produktfilm som lades ut före den 28 juni 2025 inte omfattas, men en film som du lägger ut eller byter ut efter det datumet gör det. Är du osäker på om en film räknas som gammal eller ny, fråga PTS. Undantaget gäller bara förinspelade tidsberoende medier, alltså film och ljud som lades ut före det datumet. Karusellen och banderollen på startsidan, ljud som startar av sig själv och blinkande etiketter ingår inte i den kategorin.

Så kontrollerar du

1. Öppna startsidan, en kategorisida och tre produktsidor. Notera allt som rör sig eller låter utan att du har klickat.
2. Rör sig något mer än fem sekunder: finns det en pausknapp som du når med Tab?
3. Startar ljud: finns det en kontroll, eller är filmen tyst (muted)?
4. Titta på produktvideorna med ljudet av. Förstår du dem med textningen? Lyssna sedan utan att titta: framgår det som visas?
5. Kör vårt gratistest och gå igenom WCAG-checklistan.

Nästa steg

Börja med det som är billigast: ta bort autoplay med ljud, lägg en pausknapp på karusellen och stäng av blinkande etiketter. Lägg därefter textning på de produktvideor som har tal, och skriv in det som visas i manuset när nästa film spelas in.

Källor

• W3C: Understanding 1.2.2 Captions (Prerecorded)
• W3C: Understanding 1.2.3 och 1.2.5, Audio Description or Media Alternative
• W3C: Understanding 1.4.2 Audio Control
• W3C: Understanding 2.2.2 Pause, Stop, Hide
• W3C: Understanding 2.3.1 Three Flashes or Below Threshold
• W3C: Making Audio and Video Media Accessible
• WCAG 2.0, svensk översättning
• Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, Riksdagen