WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 2 weeks ago

#40245 new enhancement

Youtube embeds lack title attribute

Reported by: morriscountynj Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 2.9
Component: Embeds Keywords:
Focuses: accessibility Cc:

Description

I use a service called Siteimprove to monitor for accessibility issues. They pointed out an issue -- when you embed a Youtube video via a link, the code comes out something like this

<iframe width="960" height="540" src="https://www.youtube.com/embed/iGddWyoWkyg?feature=oembed"
frameborder="0" allowfullscreen=""></iframe>

However, Siteimprove gives that an A-level error:

The iFrame is missing a description
The iFrame has no 'title' attribute or the 'title' attribute is empty.
Provide the frame with the attribute title=”” and add a description of the content in the title.

Is there any way to add a field to enter a title for the iframe?

See this page for an example: Example

Change History (20)

#1 @swissspidy
11 months ago

  • Summary changed from Youtube embed -- need space to put title="" in iframe to Youtube embeds lack title attribute
  • Type changed from feature request to enhancement
  • Version changed from 4.7.3 to 2.9

Hey there,

Welcome to WordPress Trac and thanks for your report!

WordPress embeds have a title attribute for exact these reasons. Unfortunately, YouTube doesn't add a title attribute themselves. oEmbed fetches the <iframe> code directly from YouTube. See https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json for an example.

It seems like Drupal fixed this on their own by adding a custom title attribute, see https://www.drupal.org/node/2085749. Apparently they also added a name attribute: https://www.drupal.org/node/2129317. We could certainly do the same, although I'd love to see YouTube fixing this on their end.

#2 @afercia
11 months ago

  • Focuses accessibility added

Adding the accessibility focus, since iframe elements should really have a title attribute (and it's the only valid case of title attribute usage WordPress currently recommends, see all the work done so far about title attributes).

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


11 months ago

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


8 months ago

#5 @afercia
8 months ago

  • Milestone changed from Awaiting Review to 4.9

We should try a workaround for 4.9.

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


7 months ago

#8 follow-up: @tfrommen
6 months ago

Even though noone responded to the Google ticket, this seems to have been fixed already, see the example embed link @joedolson posted: https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

However, when I paste the URL (i.e., https://www.youtube.com/watch?v=M3r2XDceM6A) into the editor, the generated output still lacks the title attribute:
<iframe src="https://www.youtube.com/embed/M3r2XDceM6A?feature=oembed" allowfullscreen="" height="473" frameborder="0" width="840"></iframe>

Am I doing anything wrong, or did I misunderstand what the example link was about? Can you help, @swissspidy?

#9 in reply to: ↑ 8 @SergeyBiryukov
6 months ago

Replying to tfrommen:

this seems to have been fixed already, see the example embed link @joedolson posted: https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

There's still no title on the <iframe> element in that response, only as a separate value in the array.

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


5 months ago

#11 @afercia
5 months ago

Seems a fix from upstream isn't going to happen. @swissspidy any chance to make a patch for this?

#12 @swissspidy
5 months ago

It would be great if we could first check other oEmbed providers to see whether this is a broader problem. If so, we could apply a more general solution, not just one tied to YouTube.

#13 @afercia
5 months ago

It would be great if we could first check other oEmbed providers to see whether this is a broader problem

I've made my part and checked Vimeo :) it adds a title attribute on the iframe with the video title. Just the title of the video. It doesn't say the iframe content is about a video though. So, for example, when embedding a video that ironically has a title like The Bigger Picture, the iframe title doesn't let me actually understand what the iframe content is about.

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


5 months ago

#15 @afercia
5 months ago

  • Milestone changed from 4.9 to Future Release

Beta 1 is in 2 days. Punting as per today's a11y bug scrub.

#16 @bamadesigner
7 weeks ago

I wrote some code to solve this issue for my websites. I don't mind submitting a patch to get things started, if it's still needed.

Here's how I solved with a filter. Basically it looks for the title in the embed data array and as a possible existing title attribute. If anything, even if the title does exist in the iframe markup, it allows for it to be filtered. If it doesn't exist, it allows for it to be created from the data array or via filter.

https://github.com/wpcampus/wpcampus-network-plugin/commit/a48e4c81b1233a7051139046a91b3a19777ea902

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


6 weeks ago

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


2 weeks ago

#19 follow-up: @afercia
2 weeks ago

@bamadesigner please do feel free to go ahead :)

#20 in reply to: ↑ 19 @bamadesigner
2 weeks ago

On it!

Replying to afercia:

@bamadesigner please do feel free to go ahead :)

Note: See TracTickets for help on using tickets.