WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#35804 closed defect (bug) (fixed)

oEmbed iframe 'title' attribute

Reported by: ramiy Owned by: swissspidy
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.4
Component: Embeds Keywords: has-patch has-unit-tests
Focuses: accessibility Cc:

Description

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
	)
)

Attachments (6)

35804.patch (468 bytes) - added by ramiy 4 years ago.
35804.2.patch (528 bytes) - added by ramiy 4 years ago.
35804.3.patch (532 bytes) - added by ramiy 4 years ago.
35804.4.patch (524 bytes) - added by ramiy 4 years ago.
35804.5.patch (524 bytes) - added by ramiy 4 years ago.
35804.diff (1.6 KB) - added by swissspidy 4 years ago.

Download all attachments as: .zip

Change History (24)

@ramiy
4 years ago

#1 @ramiy
4 years ago

  • Keywords has-patch added

The patch was tested.

The result:

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

#2 follow-up: @swissspidy
4 years ago

  • Focuses accessibility added
  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to Future Release

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".

#3 in reply to: ↑ 2 @ramiy
4 years ago

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.

Last edited 4 years ago by ramiy (previous) (diff)

@ramiy
4 years ago

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


4 years ago

#5 follow-up: @ocean90
4 years ago

35804.2.patch:

  • esc_attr__() should be esc_attr()
  • - should be &mdash;
  • In the translators comment a comma should be used

What about removing "embedded" from the title? Something like &#8220;%1$s&#8221; from %2$s ("Post title" from site name).

@ramiy
4 years ago

#6 in reply to: ↑ 5 ; follow-up: @ramiy
4 years ago

Replying to ocean90:

esc_attr__() should be esc_attr()

Done.

- should be &mdash;

Done.

In the translators comment a comma should be used

Done.

What about removing "embedded" from the title? Something like &#8220;%1$s&#8221; 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.

Last edited 4 years ago by ramiy (previous) (diff)

#7 @ramiy
4 years ago

  • Summary changed from Add post type to the oEmbed iframe 'title' attribute to oEmbed iframe 'title' attribute

#8 follow-up: @swissspidy
4 years ago

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.

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


4 years ago

#10 in reply to: ↑ 8 @afercia
4 years ago

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:

https://cldup.com/sf6Q_dPM_F.png

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

https://cldup.com/jVGOtIEkBn.png

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.

#11 @ramiy
4 years ago

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

#12 @afercia
4 years ago

@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.

#13 in reply to: ↑ 6 @ocean90
4 years ago

Replying to ramiy:

What about removing "embedded" from the title? Something like &#8220;%1$s&#8221; 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.

#14 @swissspidy
4 years ago

Thanks for your feedback, @afercia!

Without using "Embedded WordPress post" for the stated reasons, &#8220;%1$s&#8221; &mdash; %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.

#15 @swissspidy
4 years ago

  • Milestone changed from Future Release to 4.5
  • Owner set to swissspidy
  • Status changed from new to accepted
  • Version set to 4.4

@ramiy
4 years ago

@ramiy
4 years ago

#16 @ramiy
4 years ago

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

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

@swissspidy
4 years ago

#17 @swissspidy
4 years ago

  • Keywords has-patch has-unit-tests added; needs-patch removed

35804.diff changes the entity from &mdash; to &#8212; because of the XML output in the REST API controller. Also updates the tests.

#18 @swissspidy
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.