oEmbed iframe 'title' attribute

[ramiy]

Currently, the oEmbed output has a title attribute on the <iframe> tag saying "Embedded WordPress Post".

<iframe title="Embedded WordPress Post">

It's a hard-coded text.

We should replace the "Post" to support custom post types.

The attached patch do that.

I replaced the old code:

esc_attr__( 'Embedded WordPress Post' )

With the new code:

esc_attr__(
	sprintf(
		/* translators: %s: post type */
		__( 'Embedded WordPress %s' ),
		$post->post_type
	)
)

[ramiy]

The patch was tested.

The result:

• On posts: title="Embedded WordPress post"
• On pages: title="Embedded WordPress page"

[swissspidy]

For reference, to understand why this attribute is even there:

​https://github.com/swissspidy/oEmbed-API/issues/42
​https://github.com/swissspidy/oEmbed-API/pull/121

Citing @johnbillion:

I think "Embedded WordPress Post" isn't an accurate representation of the iframe's contents. The site's title should be used instead. I'll do a new PR.

A new PR was never submitted, so this likely was missed.

I'm more in favour of using the site title instead of Embedded WordPress %s. First, because it's more representative and some likely don't want to see "WordPress" in there.

Second, Embedded WordPress %s needs to be translated differently depending on the post type. For example, in German page is female while post is male. This means the string would need to be added to post type labels, which I don't really want to do. See also #14981.

I'd suggest something along the lines of "Embedded content from xy".

[ramiy]

Replying to swissspidy:

I'm more in favour of using the site title instead of Embedded WordPress %s.

I'd suggest something along the lines of "Embedded content from xy".

I think that post-title is more representative than site-title.

With site-title alone, on all the sites, the embeds looks the same.

if, for example, I embed several posts from a single site, all the titles identical, and you don't know the what is the context.

Adding the post titles will provide additional information.

Something like Embedded content from %1$s - %2$s.

%1$s is the site-title and %2$s is the post-title.

This way, the voice over can tell you that it's an external content (embedded content), and provide you the context with site title.

[ocean90]

35804.2.patch​:

• esc_attr__() should be esc_attr()
• - should be —
• In the translators comment a comma should be used

What about removing "embedded" from the title? Something like “%1$s” from %2$s ("Post title" from site name).

[ramiy]

Replying to ocean90:

esc_attr__() should be esc_attr()

Done.

- should be —

Done.

In the translators comment a comma should be used

Done.

What about removing "embedded" from the title? Something like “%1$s” from %2$s ("Post title" from site name).

Not sure about this. @swissspidy convinced me to add site-title, it is more representative. Besides, only blind people see the title attribute. They should know that it's an embedded content from external site.

[swissspidy]

Besides, only blind people see the title attribute. They should know that it's an embedded content from external site.

The screenreader will tell the user that they're interacting with an iframe.

For example, this is the result by using VoiceOver on OS X:

1 Item Interact with {iframe title attribute}, group, {document title}, frame

Without the patch, this will be:

Interact with Embedded WordPress Post, group, Lorem ipsum – My Awesome Blog, frame

With the patch, there will obviously be duplicated information (post title and site title read twice).

I also tested it using the ChromeVox browser extension, which reads "Embedded WordPress Post" and then "Lorem ipsum – My Awesome Blog" when I select the iframe.

It looks like ideally the title attribute should be something like "Embedded content from {site title}" and the document title should just consist of the post title. VoiceOver would turn it into:

Interact with Embedded Content from My Awesome Blog, group, Lorem ipsum, frame

Obviously I am not an a11y expert and we can only make some guesses without having some actual feedback from the accessibility team.

[afercia]

Replying to swissspidy:

It looks like ideally the title attribute should be something like "Embedded content from {site title}" and the document title should just consist of the post title.

I'm afraid different screen readers do different things with iframes, it also looks like the behavior differs depending on the way users navigate content, for example if tabbing or using the arrow keys. Testing with Firefox + NVDA and tabbing through focusable elements the iframe title attribute gets read out and the document title is ignored:

when using the arrow keys, both the iframe title attribute and the document title are ignored:

As far as I can tell, IE 11 and JAWS always read out the document title and ignore the iframe title attribute.

In any case, the title of the embedded post get always read out because it's the first thing screen readers find within the iframe.

[ramiy]

@afercia thanks for the feedback. What's the preferred structure for the 'title' attr?

[afercia]

@ramiy there's no established rule. I should inform "what" the iframe is about, in the most concise possible way. From a language point of view, I'd avoid "embedded" because maybe a bit too technical. Probably users don't care to know that content is "embedded" but just that comes from an external source.

[ocean90]

Replying to ramiy:

What about removing "embedded" from the title? Something like “%1$s” from %2$s ("Post title" from site name).

Not sure about this. @swissspidy convinced me to add site-title, it is more representative.

Not sure what you mean, but my example includes both: title of the content and the name of the site.

[swissspidy]

Thanks for your feedback, @afercia!

Without using "Embedded WordPress post" for the stated reasons, “%1$s” — %2$s ("post title" — site name) seems preferable for the title attribute.

For the <title> (document title) we could theoretically just use the post title, but wp_get_document_title() is more easily filterable.

Basically, both fields should contain the same information.

[ramiy]

In the 4th patch I made a mistake ("site name" — post title).

Use the 5th patch ("post title" — site name).

[swissspidy]

35804.diff​ changes the entity from — to — because of the XML output in the REST API controller. Also updates the tests.

[swissspidy]

In 36873:

Embeds: Adjust the iframe title attribute for improved accessibility.

Changes the title attribute from Embedded WordPress Post to "Post name" — site title.

Props ramiy.
Fixes #35804.