Skip to content

Fix: Add aria-label to YouTube iframe for screen readers (fixes #22)#48

Open
swashbuck wants to merge 1 commit into
masterfrom
issue/22
Open

Fix: Add aria-label to YouTube iframe for screen readers (fixes #22)#48
swashbuck wants to merge 1 commit into
masterfrom
issue/22

Conversation

@swashbuck

Copy link
Copy Markdown
Contributor

Fixes #22

Fix

  • Add an author-controlled, localisable aria-label to the YouTube <iframe>, taken from the component's displayTitle (falling back to title).

Notes

Previously the iframe had no author-set accessible name. The only name was a title attribute injected at runtime by the YouTube widget API, set to the video's own YouTube title, which authors cannot control or localise. The new aria-label takes precedence in the accessible name computation, so screen readers announce the component's title instead.

Per the discussion on #22, aria-label is used rather than title (as title behaves inconsistently on iframes). This mirrors the approach already used in adapt-contrib-media (adaptlearning/adapt_framework#2822). Relevant WCAG success criterion: 4.1.2 Name, Role, Value (technique H64).

The label is only emitted when displayTitle or title is set, so no empty aria-label="" is produced.

Testing

  1. Add a YouTube component with a displayTitle set.
  2. View the page and inspect the rendered <iframe> inside .youtube__widget.
  3. Confirm it has aria-label matching the component's displayTitle.
  4. With a screen reader, confirm the iframe is announced using that title.

Posted via collaboration with Claude Code

@swashbuck swashbuck requested a review from kirsty-hames July 13, 2026 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Needs Reviewing

Development

Successfully merging this pull request may close these issues.

adapt-youtube & adapt-vimeo iframes have no title attributes

3 participants