adobe / adobe/aem-core-wcm-components

[a11y][Embed] <Iframe> elements with identical accessible names

Open
#2,964 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
795
Forks
775
Avg merge
3d 22h
Merged PRs (30d)
8

Description

## Bug Report

**Current Behavior**
We are using a tool called Eye Able https://eye-able.com/ which is helping us detect any potential accessibility issues. This tool reports a problem with embed component, with embeddable markup for Youtube to be exact.

Image

In case we have two YT videos on the same page, they both have the same title value which is reported back by the Eye Able as the issue.

Image

I've inspected the code from Core Components and it appears that title is backed in and cannot be changed in any way.

https://github.com/adobe/aem-core-wcm-components/blob/8d27890e8252e3f4d0a26358004c55f3bfc7eafa/content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embeddable/youtube/youtuberesponsive.html

**Expected behavior/code**
Title attribute should not have a fixed title.

**Environment**
- AEM 6.5.19
- Core Components version 2.22.10

**Possible Solution**
Use the same value for title as for the Aria label?
Pull the title directly from YT?

Contributor guide

Open the contributing guide

Research direction

Start by reading content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embeddable/youtube/youtuberesponsive.html and inspect how the iframe title is generated. Reproduce the page with two YouTube embeds, then verify that their generated titles are no longer identical while the embed remains correctly accessible.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, java
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.