Video

[usethetics]

• [ ] HTML/CSS component
• [ ] Web Component
• [ ] Figma component
• [ ] Design tokens
• [ ] Documentation

Description

A video player.

Use when

Don’t use when

[usethetics]

Add section on transcripts to a11y guidelines.

[Robbert]

• De video player moet een tekstalternatief kunnen hebben in expandable region, bijvoorbeeld met een transcriptie.
• De labels in de user interface moeten beschikbaar zijn in de taal van de pagina, dus de player moet een mogelijkheid hebben om UI labels te vertalen.
• De labels van de buttons moeten passen bij de actie. Bij toggle buttons moeten aria-label aangepast worden wanneer ze pressed zijn:
  • Play/pauze: "Afspelen" vs "Pauzeer"
  • Fullscreen: "Schermvullende weergave openen"
  • Ondertitels: "Ondertiteling aan" vs "Ondertiteling uit"
  • Descriptive audio track: "Audiobeschrijving afspelen" vs "Audiobeschrijving stoppen"
  • Video description: "Gebarentaal tonen" vs "Gebarentaal verbergen"
• Toggle buttons moeten aria-pressed hebben, bijvoorbeeld:
• Onderzoeken of pressed toggle buttons met een aangepast label duidelijk zijn:
  • toggle button, pressed, Pauzeer
  • toggle button, pressed, Ondertiteling uit
  • toggle button, pressed, Audiobeschrijving stoppen
  • toggle button, pressed, Gebarentaal verbergen
• Onderzoeken of tooltips nodig zijn voor icon buttons, in plaats van title attribuut.
• Vermijd de title attribuut, daarvan kan de tooltip over de video heen staan zonder dat de button focus heeft.
• Keyboard shortcuts zonder modifier keys mogen alleen werken als iets de bijbehorende button focus heeft. Bijvoorbeeld M als de mute button focus heeft. Naar aanleiding van dit artikel: Keyboard shortcuts need modifier keys
• Icon buttons moeten minimaal 24x24 of 48x48 zijn, afhankelijk van WCAG versie
• Spatie button moet wel toggle buttons bedienen, niet video pauzeren (stopPropagation()).
• Spatie button: op welke plekken mag de spatie button de video pauzeren? Overal in de video, of alleen wanneer de play button focus heeft? Hoe zit het in full screen modus?
• Hoe wordt de video duration beschikbaar voor screen reader gebruikers? Duration moet een misschien duidelijke onzichtbare description hebben: "Videoduur: 2:30". Misschien aria-describedby?
• Tekst description moet paragraphs gebruiken, zodat je kunt skippen of terugspoelen met screen readers.
• Video: moet de video in een figure staan?
• Moet video een titel hebben?
• Moet titel van de video in een heading of in een figcaption staan?
• Is het nodig dat de beschrijvende tekst direct na de video komt, voor de download links?
• Link in de documentatie naar een voorbeeld van toegankelijke download links.
• Icon buttons met zichtbare tekst moeten de tekst in het label hebben. Bijvoorbeeld: aria-label="Closed Captions (CC)".

[jeffreylauwers]

Niet enkel op kleur vertrouwen om de status van de video controls te communiceren.

[jeffreylauwers]

Moeten de 'controls' in beeld blijven bij full screen?

[jeffreylauwers]

Moeten de 'controls' een zichtbaar label hebben met het oog op spraakbediening?

[Yolijn]

• Open Gemeenten https://github.com/OpenGemeenten/AccessibleMediaPlayer
• ICTU https://github.com/ICTU/ictuwp-plugin-rijksvideo