Make WordPress Core

Opened 5 months ago

Last modified 3 weeks ago

#62579 accepted defect (bug)

iFrame plugins must have an accessible name

Reported by: jaimewhi's profile jaimewhi Owned by: joedolson's profile joedolson
Milestone: 6.9 Priority: normal
Severity: major Version:
Component: Embeds Keywords: reporter-feedback
Focuses: accessibility, coding-standards Cc:

Description

The Vimeo and YouTube iFrame plug ins do not have an accessible name, which is causing accessibility issues during our audits. We have multiple teams with varied degree of development skill, so custom HTML to correct each time we use these is not feasible. I submitted a support request and they recommended submitting a support ticket.
I don't see this item on the existing tickets. Screen reader users rely on the frame title to describe the content and it can be difficult or confusing for users if the accessible name is missing.

Change History (11)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 months ago

#2 @joedolson
5 months ago

  • Keywords reporter-feedback added

The core YouTube and Vimeo embeds already have title attributes attached to their iFrames. Can you provide more detail about exactly how you're adding these video embeds?

Screenshots are very helpful for knowing more about how you're adding these to your site.

#3 @jaimewhi
4 months ago

Sure. It is on a public-facing site, https://computing.usc.edu/

Using the axe DevTools you can see the USC Frontiers of Computing iFrame does not have an accessible name.

#4 @joedolson
4 months ago

Yes, I believe that you're seeing that, and I can verify that it is missing on your site - what I'm asking is what your method is for adding the video to the page, and whether it matches what I'm testing (which is the default oembed behavior, by dropping a link to the vimeo URL in a paragraph block.)

Do you get the same result if you add the same video to a new blank page?

If you have a staging environment, do you have the same results after disabling all plugins and switching to a default theme?

#5 @jaimewhi
4 months ago

Apologies. The video was added using the Vimeo Embed Block, not directly uploaded to the site. We tried to use the Video Embed Block and the Embed Block, but both automatically switched to the Vimeo Embed Block upon entering the URL because it detected a Vimeo video.

#6 @sabernhardt
4 months ago

  • Component changed from Plugins to Embeds

I think the problem might relate to your video's privacy settings, whether Vimeo does not give the title for embedding or they give it in a different way that WordPress does not recognize.

  • When I insert https://vimeo.com/76979871, I get a Vimeo Embed block, and its iframe element has a title attribute with the video title (on the front end): "The New Vimeo Player (You Know, For Videos)"
  • When I insert your Vimeo video into my local installation, I get an error message: "Because of its privacy settings, this video cannot be played here."

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 months ago

#9 @joedolson
3 months ago

  • Milestone changed from Awaiting Review to Future Release

Based on the reporter's feedback and @sabernhardt's comments, this seems to be specific to privacy settings.

It seems like the Vimeo oEmbed endpoint is giving different information for different parts of the embed API if the video has privacy controls.

We should explore this further to determine whether we can get that data for private videos. If we can, then it makes sense to fix the issue; but if it's just not available, then we may need to close it or report upstream to Vimeo, if that's relevant.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 weeks ago

#11 @joedolson
3 weeks ago

  • Milestone changed from Future Release to 6.9
  • Owner set to joedolson
  • Status changed from new to accepted
Note: See TracTickets for help on using tickets.