YouTube-filmpjes toegankelijk insluiten – Toegankelijkheid

Filmpjes maken content begrijpelijker en aantrekkelijker. Maar een ingesloten YouTube-filmpje is niet automatisch toegankelijk. De mediaspeler moet goed zijn ingesteld, het filmpje moet ondertiteld zijn en de insluitcode moet kloppen.

In dit artikel lees je hoe je een YouTube-filmpje toegankelijk kunt insluiten op een webpagina. Dit artikel is een aanvulling op het artikel over toegankelijke filmpjes en geluidsfragmenten.

De insluitcode

Met een insluitcode (ook wel embed-code) kun je filmpjes van YouTube op een webpagina plaatsen. Deze code ziet er ongeveer zo uit:

<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" title="YouTube video player" ... ></iframe>

In het src-attribuut staat de URL van het filmpje. Je kunt parameters toevoegen aan deze URL om de toegankelijkheid van de mediaspeler te verbeteren. Elke parameter voeg je toe na een ? (of & bij meerdere parameters).

Parameters overzicht

Hier is een overzicht van de belangrijkste YouTube-parameters voor toegankelijkheid:

autoplay=0: voorkomt automatisch afspelen (standaard uit). Laat deze instelling altijd uit.
controls=1: toont de bedieningselementen (standaard aan). Verberg de bedieningselementen nooit.
disablekb=1: schakelt sneltoetsen uit. Gebruik alleen als je eigen bedieningselementen bouwt.
cc_load_policy=1: schakelt ondertitels standaard in.
cc_lang_pref=nl: stelt de voorkeurstaal voor ondertitels in op Nederlands.
rel=0: beperkt gerelateerde filmpjes tot hetzelfde kanaal. Dit vermindert afleiding.
fs=1: staat volledig scherm toe (standaard aan). Laat deze instelling aan.
playsinline=1: speelt het filmpje af op de pagina in plaats van in volledig scherm op iOS.

Lees meer over YouTube parameters

Toegankelijke naam

Geef het <iframe>-element een duidelijke titel met het title-attribuut. Schermlezers gebruiken deze titel om het iframe aan te kondigen. Zonder titel hoort een schermlezer alleen “frame” zonder verdere informatie. Dat maakt het onmogelijk om te weten wat het filmpje bevat.

De standaard titel “YouTube video player” is niet beschrijvend genoeg. Vervang deze door een titel die het onderwerp van het filmpje beschrijft.

Let op: gebruik het title-attribuut en niet aria-label voor iframes. Het title-attribuut wordt door meer schermlezers betrouwbaar ondersteund op iframes. VoiceOver op macOS leest de content van een iframe niet automatisch voor. Gebruikers moeten actief het iframe binnengaan. Zonder een beschrijvende titel weten zij niet dat er een filmpje staat.

Na het toevoegen van de naam en parameters van de insluitcode ziet deze er zo uit:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1&cc_lang_pref=nl&rel=0" title="Hoe schrijf je een goed tekstalternatief" loading="lazy" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ondertitels

Ondertitels zijn nodig voor mensen die doof of slechthorend zijn en voor mensen die het filmpje bekijken in een omgeving waar geluid niet mogelijk is.

YouTube kan automatisch ondertitels genereren. Deze ondertitels zijn vaak nog niet volledig correct. Controleer de gegenereerde ondertitels daarom altijd en verbeter ze waar nodig. Beschrijf in de ondertitels ook belangrijke geluiden, zoals een deurbel, een explosie of belangrijke muziek.

YouTube gebruikt deze ondertitels ook om een transcript van het filmpje te maken.

Audiodescriptie

Sommige filmpjes bevatten belangrijke visuele informatie die niet uit het geluid af te leiden is. Denk aan tekst in beeld, grafieken of handelingen zonder toelichting. Voor deze filmpjes is een audiodescriptie nodig.

YouTube ondersteunt sinds kort meerdere geluidssporen per filmpje. Hiermee kun je een apart geluidsspoor met audiodescriptie toevoegen via YouTube Studio. Er is geen URL-parameter om het audiodescriptiespoor automatisch te activeren. Kijkers moeten dit zelf inschakelen.

De beste aanpak is om visuele informatie al tijdens de productie van het filmpje mondeling te beschrijven. Op deze manier is een apart audiodescriptiespoor niet nodig.

Toetsenbordbediening

De YouTube-mediaspeler is grotendeels bedienbaar met het toetsenbord. Alle bedieningselementen (afspelen, pauzeren, volume, ondertitels, volledig scherm) zijn bereikbaar met de Tab-toets en te activeren met Enter of Spatie.

YouTube heeft ook sneltoetsen die werken als het iframe focus heeft. Denk aan K voor afspelen/pauzeren, M voor dempen, C voor ondertitels en F voor volledig scherm. Deze sneltoetsen zijn alleen actief als het iframe focus heeft. Ze voldoen daarmee aan succescriterium 2.1.4 Enkel teken sneltoetsen.

De parameter disablekb=1 schakelt de sneltoetsen van de mediaspeler uit. Dit voorkomt dat schermlezers per ongeluk een sneltoets activeren. Maar het heeft een nadeel: de sneltoets C voor ondertitels werkt dan ook niet meer.

Of je disablekb=1 gebruikt, hangt af van je situatie. Gebruik je eigen bedieningselementen buiten het iframe (via de YouTube IFrame Player API)? Dan is disablekb=1 een goede keuze. Gebruik je de standaard YouTube-speler? Dan is het beter om de sneltoetsen aan te laten staan.

Focus management

Als de focus eenmaal in het YouTube-iframe staat, moet een gebruiker door alle bedieningselementen van de mediaspeler navigeren voordat de focus terugkeert naar de pagina. Dit kan verwarrend zijn, omdat de speler veel interactieve elementen bevat.

Test wel altijd of je met de Tab-toets het iframe weer kunt verlaten. Dit is een vereiste van succescriterium 2.1.2 Geen toetsenbordval. Dit succescriterium valt onder non-interferentie.

Responsief insluiten

Een ingesloten filmpje moet meeschalen met de breedte van het scherm. Gebruik hiervoor de CSS-eigenschap aspect-ratio. Dit is de moderne aanpak en wordt door alle huidige browsers ondersteund.

iframe[src*="youtube"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
}

Houd de width– en height-attributen op het <iframe>-element, ook als je CSS gebruikt voor de responsieve weergave. Browsers gebruiken deze attributen om de juiste ruimte te reserveren voordat de CSS is geladen. Dit voorkomt een onverwachte verschuiving van de pagina-inhoud.

Filmpjes mogen horizontaal scrollen op kleine schermen. Dit is een uitzondering in succescriterium 1.4.10 Reflow. Toch is een responsieve weergave voor de gebruiksvriendelijkheid aan te raden.

Vereisten en aanbevelingen voor een toegankelijk YouTube-filmpje

Dit zijn de vereisten en aanbevelingen voor het toegankelijk insluiten van YouTube-filmpjes:

WCAG-vereisten

Geef het <iframe>-element een beschrijvend title-attribuut.
Zorg voor correcte ondertitels (niet alleen automatisch gegenereerd).
Beschrijf visuele informatie in het geluidsspoor van het filmpje zelf, bied anders een audiodescriptie aan.
Vermijd automatisch afspelend geluid.
Zorg dat de mediaspeler bedienbaar is met het toetsenbord.
Zorg dat de focus het iframe weer kan verlaten.
Verberg de bedieningselementen niet.

Aanbevolen

Bied een transcript aan op de pagina.
Gebruik cc_load_policy=1 en cc_lang_pref=nl om ondertitels standaard in te schakelen.
Gebruik rel=0 om afleidende gerelateerde filmpjes te beperken.
Maak het filmpje responsief met aspect-ratio: 16 / 9.