Skip to content

Add descriptive aria-label to the Vimeo iframe for screen readers #55

Description

@swashbuck

Subject of the issue

The Vimeo component's iframe has no author-controlled accessible name. The Vimeo player library injects a title attribute set to the video's own Vimeo title, so screen reader users hear whatever the uploader named the video (in its original language) rather than a name the course author chose. That string is not localisable and not under the author's control.

This is the Vimeo counterpart of adapt-youtube#22, and should follow the same approach already used in Media (see adaptlearning/adapt_framework#2822): expose the component's own title as an aria-label. Per the guidance on adapt-youtube#22, use aria-label rather than title, as title behaves inconsistently on iframes.

Your environment

  • adapt-vimeo 3.4.0 / Framework 5.56.2
  • Any browser
  • Any OS

Steps to reproduce

  1. Add the Vimeo component (using the plugin's example.json).
  2. View the page and inspect the <iframe> rendered inside .vimeo__widget.
  3. Note there is no aria-label. The only accessible name is a title attribute injected by the Vimeo player library from the video's own Vimeo title.

Expected behaviour

The iframe exposes an author-controlled, localisable accessible name, taken from the component's displayTitle (falling back to title) and applied as aria-label.

Actual behaviour

The iframe has no aria-label. Its accessible name depends on the Vimeo-injected title, which the author cannot set or localise.

Suggested Fix

Mirror adapt-contrib-media: once the Vimeo player is ready, set aria-label on the player's iframe element to displayTitle || title. Because the iframe is created at runtime by the Vimeo SDK (not in the template), this is done in VimeoView rather than in the Handlebars template.

Relevant WCAG success criterion: 4.1.2 Name, Role, Value (technique H64).

Posted via collaboration with Claude Code

Metadata

Metadata

Assignees

Type

Fields

No fields configured for Bug.

Projects

Status
Needs Reviewing

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions