Tekstning gør video og lyd tilgængeligt for døve og hørehæmmede, for brugere der ser uden lyd, og det forbedrer samtidig søgbarheden. Her er en kort guide med kodeeksempler.

Hvorfor tekste?

WCAG 2.1 stiller disse krav:

• 1.2.1 (A): Ren lyd skal have en tekstversion (transskription).
• 1.2.2 (A): Optaget video med lyd skal have undertekster.
• 1.2.4 (AA): Live-video skal have undertekster.

I Danmark kræver webtilgængelighedsloven, at offentlige myndigheder overholder WCAG 2.1 AA.

Tekstning af video

Standarden på web er WebVTT (.vtt): en tekstfil med tidskoder, som kobles til videoen med <track>-elementet. Undertekster til hørehæmmede (kind="captions") gengiver også lyde og hvem der taler. Oversættelser (kind="subtitles") gengiver kun dialog.

Mere om WEBVTT se denne artikel på Mozilla.

WebVTT-fil (da.vtt):

WEBVTT

00:00:01.000 --> 00:00:04.000
<v Anna>Velkommen til kurset.

00:00:04.500 --> 00:00:07.000
[Dør smækker]

HTML:

<video controls width="640">
  <source src="film.mp4" type="video/mp4">
  <track src="da.vtt" kind="captions" srclang="da" label="Dansk" default>
  <track src="en.vtt" kind="subtitles" srclang="en" label="English">
</video>

default gør, at teksten vises automatisk, og browseren viser en menu, hvor brugeren kan vælge spor. Udseendet kan styles med CSS:

video::cue {
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 1.1rem;
}

Tekstning af audio

<audio> viser ikke undertekster visuelt, selvom elementet accepterer <track>. Løsningen er derfor en transskription: den fulde tekst placeret synligt på siden eller linket til lige ved afspilleren.

<audio controls src="podcast.mp3"></audio>
<details>
  <summary>Læs transskription</summary>
  <p><strong>Anna:</strong> Velkommen til podcasten…</p>
</details>

Hvis du vil vise teksten synkront med lyden, kan du bruge et skjult VTT-spor og JavaScript:

<audio id="lyd" controls src="podcast.mp3">
  <track src="da.vtt" kind="captions" srclang="da" default>
</audio>
<p id="tekst" aria-live="polite"></p>

<script>
  const track = document.getElementById('lyd').textTracks[0];
  track.mode = 'hidden'; // indlæs spor uden visning
  track.addEventListener('cuechange', () => {
    const cue = track.activeCues[0];
    document.getElementById('tekst').textContent = cue ? cue.text : '';
  });
</script>

Gode råd

• Brug automatisk talegenkendelse (fx YouTube eller Whisper) som udgangspunkt, men ret altid teksten manuelt.
• Hold linjer korte: maks. ca. 2 linjer og 42 tegn pr. linje.
• Synkroniser teksten præcist med talen.
• Serveren skal levere .vtt med MIME-typen text/vtt.
• Ved video fra et andet domæne kræves CORS og crossorigin på <video>.

Praktiske udfordringer

Hvis en ekstern *.vtt fil ikke loades, så prøv at lægge teksten direkte ind i siden med scriptet.

Tips til AI prompts

• Find linket til video/audio filen i WP Medier.
• Giv din yndlings-AI linket og bed den generere en passende kode.
• Bed fx om et output, hvor du kan bruge blokken “Tilpasset HTML”. Her har du mulighed for at skrive HTML, CSS og JavaScript i hver sit faneblad.

Tips til JavaScript og video

Du kan udvikle dine egne ikoner og knapper til styring af lyd og video. Undersøg mulighederne på W3 Schools.

Styring af video og audio er næsten identisk med indbyggede funktioner, som:

• .play()
• .pause()
• .stop()

Disse funktioner kan kaldes ved hjælp af knapper med eventlisteners.