Vimeo-filmpjes toegankelijk insluiten – Toegankelijkheid

Naast YouTube is Vimeo een veelgebruikt platform voor het insluiten van filmpjes op websites.

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

De insluitcode

Met een insluitcode kun je filmpjes van Vimeo op een webpagina plaatsen. De code bestaat uit een <iframe>-element met daarin de URL van het filmpje.

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/[VIDEO_ID] style="position:absolute;top:0;left:0;width:100%;height:100%;" title="..." ...></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

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 Vimeo-parameters voor toegankelijkheid:

autoplay=0: voorkomt automatisch afspelen. Laat deze instelling altijd uit.
muted=1: dempt het geluid bij het laden. Verplicht als je toch autoplay gebruikt.
controls=1: toont de bedieningselementen (standaard aan). Verberg de bedieningselementen nooit.
keyboard=0: schakelt sneltoetsen uit (Tab-navigatie blijft werken).
cc=1: toont de ondertitelknop (standaard aan). Verberg deze knop nooit.
texttrack=nl: schakelt Nederlandse ondertitels standaard in.
transcript=1: toont de transcriptknop (standaard aan).
speed=1: toont de snelheidsregeling. Handig voor mensen die het filmpje langzamer willen afspelen.
fullscreen=1: staat volledig scherm toe (standaard aan).
color=000000: verandert de standaardkleur van de bedieningselementen (vul een hex-waarde in)

Lees meer over Vimeo 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.

Vimeo voegt standaard een title-attribuut toe met de titel van het filmpje op Vimeo. Controleer altijd of deze titel beschrijvend genoeg is.

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

<iframe
  width="640"
  height="360"
  src="https://player.vimeo.com/video/VIDEO_ID?texttrack=nl&keyboard=0&speed=1"
  title="Instructievideo over toegankelijke formulieren (video)"
  loading="lazy"
  allow="fullscreen; 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.

Je kunt ondertitels toevoegen in Vimeo via de taalinstellingen van het filmpje. Upload een ondertitelbestand in SRT- of VTT-formaat. Vimeo ondersteunt ook automatisch gegenereerde ondertitels, maar die zijn alleen beschikbaar op betaalde abonnementen en in een beperkt aantal talen (waaronder Engels, Frans, Duits en Spaans, maar niet Nederlands).

Automatisch gegenereerde ondertitels bevatten fouten. Controleer en corrigeer ondertitels daarom altijd handmatig. Automatische ondertitels zijn niet voldoende voor WCAG-conformiteit.

Gebruik de parameter texttrack=nl om Nederlandse ondertitels standaard in te schakelen in de ingesloten mediaspeler. Dit werkt alleen als er Nederlandse ondertitels zijn geüpload voor het filmpje.

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.

Vimeo ondersteunt sinds begin 2024 meerdere geluidssporen per filmpje. Je kunt een apart geluidsspoor uploaden met het type “Audio description”. Kijkers kunnen dan wisselen van geluidsspoor via het tandwiel-icoon in de mediaspeler.

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

Toetsenbordbediening

De Vimeo-mediaspeler is volledig 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.

Vimeo 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 keyboard=0 schakelt de sneltoetsen van de mediaspeler uit. Dit voorkomt dat schermlezers per ongeluk een sneltoets activeren. De Tab-navigatie en de bedieningselementen blijven wel werken.

Focusbeheer

Als de focus eenmaal in het Vimeo-iframe staat, moet een gebruiker door de bedieningselementen van de mediaspeler navigeren voordat de focus terugkeert naar de pagina.

Test daarom 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*="player.vimeo.com"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
}

Let op: de standaard insluitcode van Vimeo gebruikt nog de oudere techniek met padding-bottom: 56.25% en een omsluitende <div>. Die techniek werkt ook, maar de aspect-ratio-aanpak is eenvoudiger en heeft geen extra HTML-element nodig.

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.

Verschil met YouTube

Vimeo en YouTube lijken op elkaar, maar er zijn een paar belangrijke verschillen voor toegankelijkheid:

Vimeo voegt standaard een (waarschijnlijk) beschrijvende title toe aan het <iframe>-element. YouTube voegt standaard “YouTube video player” toe. Bij Vimeo hoef je de titel daarom minder vaak handmatig aan te passen.
Vimeo ondersteunt een apart audiodescriptiespoor. Bij YouTube is dit lastiger te realiseren.
Bij Vimeo gebruik je keyboard=0 om sneltoetsen uit te schakelen. Bij YouTube gebruik je disablekb=1. Het effect is vergelijkbaar: sneltoetsen uit, Tab-navigatie blijft werken.
Bij Vimeo gebruik je texttrack=nl om ondertitels standaard in te schakelen. Bij YouTube gebruik je cc_load_policy=1 in combinatie met cc_lang_pref=nl.
Vimeo genereert automatische ondertitels alleen op betaalde abonnementen en in een beperkt aantal talen. YouTube genereert automatische ondertitels gratis in veel meer talen, waaronder Nederlands.

Tips voor een toegankelijk Vimeo-filmpje

Tot slot een aantal tips voor het toegankelijk insluiten van Vimeo-filmpjes.

WCAG-vereisten

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

Aanbevolen

Gebruik texttrack=nl om Nederlandse ondertitels standaard in te schakelen.
Gebruik keyboard=0 om sneltoetsen uit te schakelen.
Gebruik speed=1 om de snelheidsregeling te tonen.
Maak het filmpje responsief met aspect-ratio: 16 / 9.