adobe / adobe/aem-core-wcm-components
[a11y][Embed] <Iframe> elements with identical accessible names
- 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.
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.
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
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