WCAG 1.2.5: Ljudbeskrivning (förinspelad)

Vad den här regeln innebär

\n

WCAG 1.2.5 — Audio Description (Prerecorded) är ett framgångskriterium på nivå AA under Princip 1: Perceivable. Det kräver att ljudbeskrivning tillhandahålls för all förinspelad synkroniserad media som innehåller video. Ljudbeskrivning är ett berättarspår som läggs till videons primära ljud och som beskriver viktig visuell information — såsom handlingar, scenbyten, text på skärmen, ansiktsuttryck och andra visuella element — som inte förmedlas genom den befintliga dialogen eller ljudet.

\n

Kriteriet gäller synkroniserad media, definierad av WCAG som innehåll som kombinerar ljud- och videospår synkroniserade med varandra eller med tidsbaserade interaktiva komponenter. Detta inkluderar videotutorials, instruktionsfilmer, inspelade webbinarier, reklamfilmer, produktdemonstrationer och nyhetssändningar. Det gäller inte ljudenbart innehåll, videoenbart innehåll (som hanteras separat av 1.2.1) eller direktsända videoströmmar (som i förekommande fall omfattas av 1.2.6 på nivå AAA).

\n

För att klara kriteriet krävs att det för varje förinspelad video med ljud antingen finns ett extra ljudbeskrivningsspår som användaren kan aktivera, eller en utökad ljudbeskriven version av videon där pauser har lagts in för att ge berättaren tillräckligt med tid att beskriva komplex visuellt innehåll. Alternativt, om det befintliga ljudspåret redan fullt ut förmedlar all visuell information som finns i videon — vilket innebär att inget meningsfullt händer visuellt som inte beskrivs i den befintliga berättarrösten eller dialogen — krävs ingen ytterligare ljudbeskrivning.

\n

Ett underkännande inträffar när visuell information som är avgörande för att förstå videons innehåll presenteras enbart genom bildspåret utan motsvarande verbal beskrivning. Till exempel misslyckas en utbildningsvideo som visar en presentatör klicka sig igenom programvarusteg på skärmen, samtidigt som hen bara säger "klicka här, välj sedan det här alternativet", med detta kriterium eftersom en blind användare som lyssnar på ljudspåret inte har någon möjlighet att förstå vilket gränssnittselement som klickas på eller vad som väljs.

\n

Det finns ett viktigt officiellt undantag: om mediet i sig är ett medialternativ till text — vilket innebär att en video har producerats specifikt för att fungera som en tillgänglig motsvarighet till ett textdokument — och det tydligt är märkt som sådant, krävs ingen ljudbeskrivning för det innehållet.

\n\n

Varför det är viktigt

\n

Ljudbeskrivning är i första hand ett krav för användare som är blinda eller har betydande synnedsättning. Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor världen över någon form av synnedsättning. För dessa användare kan standardupplevelsen av en video utan ljudbeskrivning vara desorienterande eller helt informativt tom när berättelsen är beroende av visuellt sammanhang. En blind användare som förlitar sig på en skärmläsare kan upptäcka att en video finns på en sida, men utan ljudbeskrivning hör hen bara den dialog eller de omgivningsljud som spelats in — vilket lämnar luckor som kan göra innehållet meningslöst eller vilseledande.

\n

Föreställ dig ett konkret scenario i verkligheten: en turkisk bank publicerar en videotutorial om hur man ställer in tvåfaktorsautentisering i sin mobilapp. Videon visar varje skärm i appen i tur och ordning, med en berättare som säger saker som "tryck nu på inställningsikonen" eller "du kommer att se ett bekräftelsemeddelande". Utan ljudbeskrivning kan en blind kund som använder en skärmläsare inte avgöra var inställningsikonen är placerad visuellt, vad bekräftelsemeddelandet säger eller hur skärmarna ser ut. De utestängs i praktiken från självbetjäningstutorialen och kan behöva ringa kundtjänst — vilket innebär friktion, kostnad och en försämrad användarupplevelse.

\n

Utöver användare som är helt blinda gynnas även personer med kognitiva funktionsnedsättningar av ljudbeskrivning, eftersom de kan tycka att det är lättare att bearbeta information när den beskrivs verbalt utöver att visas visuellt. Det kan också gynna användare i ljudenbara miljöer som inte kan se en skärm, till exempel under bilkörning, eller användare som har svårt att läsa text på skärmen tillräckligt snabbt när den visas i video.

\n

Ur ett perspektiv av SEO och upptäckbarhet bidrar videoinnehåll som inkluderar transkriptioner eller manus för beskrivningar med ytterligare text som sökmotorer kan indexera, vilket potentiellt förbättrar rankningen för relevanta sökningar. Ännu viktigare är att tillhandahålla ljudbeskrivning signalerar till både användare och tillsynsmyndigheter att din plattform tar inkludering på allvar — vilket i allt högre grad är en affärs- och rättslig förväntan på många marknader.

\n\n

Relaterade Axe-core-regler

\n

WCAG 1.2.5 kräver manuell testning. Automatiserade verktyg som axe-core kan inte programmatiskt avgöra om ljudbeskrivningen som finns i en video är korrekt, tillräcklig eller meningsfull — denna bedömning kräver en mänsklig granskare som både kan titta på videon och utvärdera om all visuell information förmedlas genom ljud. Det finns ingen axe-core-regel som automatiskt kan flagga ett saknat eller otillräckligt ljudbeskrivningsspår.

\n

\n
• Manuell granskning krävs — granskning av visuellt innehåll: En mänsklig testare måste titta på hela videon med skärmen avstängd (eller med endast ljudbeskrivningsspåret aktiverat) och bedöma om all information som endast är visuell — inklusive text på skärmen, talarens handlingar, scenbyten, diagram, scheman och icke-verbala signaler — förmedlas på ett adekvat sätt. Automatiserade verktyg kan inte tolka den semantiska betydelsen av en videobildruta eller utvärdera om berättarrösten motsvarar det som visas visuellt.
\n
• Manuell granskning krävs — spårdetektering: Även om axe-core kan kontrollera om det finns ett <track>-element med kind='descriptions' på ett <video>-element, kan det inte verifiera om filen för beskrivningsspåret faktiskt innehåller meningsfulla och korrekta beskrivningar. En video kan ha ett beskrivningsspår som är tomt, maskin-genererat nonsens eller helt enkelt inte synkroniserat — allt detta skulle klara en automatiserad detektering men misslyckas med kriteriet i praktiken.
\n
• Manuell granskning krävs — kontroll av alternativ version: Vissa implementationer tillhandahåller ljudbeskrivning genom att erbjuda en separat URL eller version av videon där beskrivningen är inbakad i huvudljudspåret. Automatiserade verktyg har inget sätt att upptäcka existensen av, eller navigera till, en alternativ version av en videoresurs som är länkad någon annanstans på sidan.
\n

\n\n

Hur man testar

\n

\n
1. Identifiera all förinspelad synkroniserad media på sidan. Skanna sidan efter <video>-element, inbäddade iframes (YouTube, Vimeo, tredjepartsspelare) och alla anpassade videospelarimplementationer. Notera varje video som innehåller både ljud- och videospår och som är förinspelad snarare än live.
\n
2. Kör en automatiserad skanning med axe DevTools eller Lighthouse. Öppna webbläsarens utvecklarverktyg, kör axe DevTools på sidan och filtrera resultaten efter regler relaterade till video- eller mediaelement. Automatiserade skanningar kan lyfta fram saknade <track>-element eller ARIA-roller på anpassade videospelare, men de bekräftar inte att ljudbeskrivningen är tillräcklig. Behandla automatiserade resultat endast som en startpunkt.
\n
3. Titta på varje video med skärmen skymd eller med slutna ögon. Lyssna enbart på ljudet — inklusive eventuellt ljudbeskrivningsspår om ett sådant finns. Fråga dig själv: förmedlas varje del av meningsfull visuell information genom ljud? Kan du följa hela berättelsen, förstå alla handlingar på skärmen och identifiera all visad text och grafik enbart utifrån ljudet?
\n
4. Kontrollera om det finns ett ljudbeskrivningsspår. Inspektera videospelarens kontroller efter en knapp eller meny som aktiverar ljudbeskrivning. För HTML5-video, inspektera DOM:en efter ett <track kind='descriptions'>-element. Aktivera beskrivningsspåret och verifiera att det spelar upp synkroniserad, korrekt berättelse av visuellt innehåll.
\n
5. Kontrollera om det finns en alternativ beskriven version. Leta efter en tydligt märkt länk eller knapp intill videon med text som "Watch with Audio Description" eller "Audio Described Version." Följ länken och verifiera att den alternativa versionen innehåller korrekt, fullständig ljudbeskrivning inbakad i sitt ljudspår.
\n
6. Testa med en skärmläsare. Använd NVDA med Firefox, VoiceOver med Safari eller JAWS med Chrome och navigera till videoelementet. Bekräfta att skärmläsaren annonserar videokontrollen och eventuellt alternativ för beskrivningsspår. Spela upp videon och verifiera att beskrivningsspåret är hörbart och synkroniserat. Kontrollera att skärmläsaren inte undertrycker eller stör beskrivningsljudet.
\n
7. Utvärdera undantagsfallet. Om videon presenteras som ett medialternativ till ett textdokument, bekräfta att den är märkt som sådan direkt intill videon. Om den är korrekt märkt och fullt ut representerar samma innehåll som texten krävs ingen ljudbeskrivning — men verifiera att denna märkning finns och är entydig.
\n

\n\n

Hur man åtgärdar

\n\n

Video utan ljudbeskrivningsspår — Felaktigt

\n

<!-- A training video with significant visual content and no audio description -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n</video>\n<!-- Fails 1.2.5: subtitles are present but no descriptions track exists.\n     Visual-only information in the video is inaccessible to blind users. -->

\n\n

Video med tillagt ljudbeskrivningsspår — Korrekt

\n

<!-- A training video with an audio description track provided -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n  <!-- Audio description track added with kind='descriptions' -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- Passes 1.2.5: screen readers and description-aware players can\n     activate the descriptions track to narrate visual content for blind users. -->

\n\n

Inbäddad tredjepartsvideo utan beskrivet alternativ — Felaktigt

\n

<!-- A YouTube embed with no accessible described alternative -->\n<iframe\n  width='560'\n  height='315'\n  src='https://www.youtube.com/embed/VIDEOID'\n  title='Product Demo'\n  allowfullscreen>\n</iframe>\n<!-- Fails 1.2.5: if the YouTube video itself does not have an audio\n     description track uploaded, there is no way for blind users to\n     access visual-only content in the video. -->

\n\n

Inbäddad video med tydligt märkt beskrivet alternativ — Korrekt

\n

<!-- A YouTube embed accompanied by a link to an audio described version -->\n<figure>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/VIDEOID'\n    title='Product Demo'\n    allowfullscreen>\n  </iframe>\n  <figcaption>\n    Product Demo — visual walkthrough of the onboarding flow.\n    <!-- Alternative described version linked directly below the video -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Watch the audio described version of this video\n    </a>\n  </figcaption>\n</figure>\n<!-- Passes 1.2.5: a clearly labeled alternative with audio description\n     is provided, allowing blind users to access the same content. -->

\n\n

Anpassad videospelare utan knapp för att slå på beskrivning — Felaktigt

\n

<!-- Custom video player with no mechanism to enable audio description -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n  </div>\n</div>\n<!-- Fails 1.2.5: no descriptions track, no AD toggle, no alternative. -->

\n\n

Anpassad videospelare med knapp för ljudbeskrivning — Korrekt

\n

<!-- Custom video player with accessible audio description toggle -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n    <!-- Descriptions track linked; player JS activates it on toggle -->\n    <track id='desc-track' kind='descriptions' src='tutorial-desc.vtt'\n           srclang='en' label='Audio Description'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n    <!-- Accessible toggle button for audio description -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- Passes 1.2.5: a descriptions track is present and the custom player\n     exposes an accessible toggle so users can enable it. Player JS\n     must set aria-pressed='true' when activated and enable the track. -->

\n\n

Vanliga misstag

\n

\n\n

(Content truncated due to token limit — please retry this article.)