WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 8 weeks ago

#40245 new enhancement

Youtube embeds lack title attribute

Reported by: morriscountynj Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version: 2.9
Component: Embeds Keywords: has-patch
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

Attachments (2)

for40245.diff (2.2 KB) - added by bamadesigner 3 months ago.
for40245updated.diff (2.2 KB) - added by bamadesigner 3 months ago.
Updated patch for 40245

Download all attachments as: .zip

Change History (29)

#1 @swissspidy
14 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
14 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.


14 months ago

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


11 months ago

#5 @afercia
11 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.


10 months ago

#8 follow-up: @tfrommen
9 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
9 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.


8 months ago

#11 @afercia
8 months ago

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

#12 @swissspidy
8 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
8 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.


8 months ago

#15 @afercia
8 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
4 months 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.


4 months ago

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


4 months ago

#19 follow-up: @afercia
4 months ago

@bamadesigner please do feel free to go ahead :)

#20 in reply to: ↑ 19 @bamadesigner
3 months ago

On it!

Replying to afercia:

@bamadesigner please do feel free to go ahead :)

#21 @bamadesigner
3 months ago

Here you go @afercia! I apologize for the delay. #life

for40245.diff

#22 @afercia
3 months ago

  • Keywords has-patch added
  • Milestone changed from Future Release to 5.0

@bamadesigner thanks for the patch! Seems a very good start to me. Couple minor things: the keyword public should be removed and the title attribute value should be escaped with esc_attr().

Moving to 5.0 for consideration. Review and feedback from the Embeds component team would be greatly appreciated.

@bamadesigner
3 months ago

Updated patch for 40245

#23 @bamadesigner
3 months ago

Ah! Great catch. I've uploaded the new patch. Thanks!

for40245updated.diff

#24 @swissspidy
3 months ago

Why is an existing title attribute being replaced in that patch? Shouldn't this only add missing attributes instead of overriding the provided ones?

#25 @bamadesigner
3 months ago

It's being replaced because this patch also introduces a "oembed_title" filter.

#26 @swissspidy
2 months ago

If we‘re going to add that, I think that filter should be renamed to oembed_iframe_title_attribute or something. Also, it needs to be documented.

#27 @ocean90
8 weeks ago

#43647 was marked as a duplicate.

Note: See TracTickets for help on using tickets.