Make WordPress Core

Opened 5 months ago

Last modified 5 days ago

#58272 accepted defect (bug)

Accessibility issues with core embed block's handling of Flickr and TikTok

Reported by: markcmorantt's profile markcmorantt Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version: 6.2
Component: Embeds Keywords: needs-patch has-screenshots reporter-feedback
Focuses: accessibility Cc:

Description

There is an accessibility error with the embed iFrame for Flickr and TikTok. Specifically, that the iFrame is missing a title, with no "title" attribute, or the "title" attribute being empty. Site Improve is requesting that the frame provide an attribute titie="", and to add a description of the content in the title.

There is also an "Link without a text alternative" message for the <a data-rapid="flickr"... > link, stating that "links should always have a text alternative". In order for a link to be readable by screen reader users links must all contain either plain text, or in the case of a linked image, alt text describing where the link goes. If the linked image contains text, a good general rule is to make the alt text the same, or similar to the text in the image.

The same issue goes with the inline (iframe) frame, that does not include a text altnerative.

All three of these issues will lower page accessibility for those using screen readers.

Thanks for your help.

Attachments (3)

Flickr - item not in landmark.png (876.8 KB) - added by markcmorantt 5 months ago.
Flickr - links without alt.png (839.2 KB) - added by markcmorantt 5 months ago.
Flickr - missing title.png (857.0 KB) - added by markcmorantt 5 months ago.

Change History (14)

#1 @markcmorantt
5 months ago

Another related note is that the blocks mentioned are not navigable by keyboard, which is causing another accessibility warning with Site Improve.

I'm unable to add other attachments for the Tiktok issue screen shots, but they are essentially the same as the one shown in these attachments.

Also, apologies if my formatting for this ticket is completely wrong. I don't have a lot of experience submitting tickets to WordPress so I'm sure there are a lot of issues with how I'm posting this up. Apologies for any confusion.

Last edited 5 months ago by markcmorantt (previous) (diff)

#2 follow-up: @sabernhardt
5 months ago

  • Component changed from General to Embeds
  • Focuses accessibility added

#3 in reply to: ↑ 2 @markcmorantt
5 months ago

Replying to sabernhardt:
Thank you!

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


3 months ago

#5 @joedolson
3 months ago

  • Milestone changed from Awaiting Review to 6.4
  • Owner set to joedolson
  • Status changed from new to accepted

We're not able to do anything at all about the content within the iframe; that's provided by the media provider, in this case Flickr. However, we should be able to add a title attribute to the iframe itself, so that the container is labeled for screen readers.

We'll probably want to do something similar to what we did for the YouTube oEmbed: https://core.trac.wordpress.org/attachment/ticket/40245/40245.3.diff

#6 @oglekler
6 weeks ago

  • Keywords needs-patch has-screenshots added

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


3 weeks ago

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


12 days ago

#9 @joedolson
12 days ago

I've done some exploration of this, and have not been able to reproduce this issue. Can you provide specific step-by-step methods to reproduce this?

Specific examples to embed and the steps followed to embed them on the page would be very helpful.

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


5 days ago

#11 @joedolson
5 days ago

  • Keywords reporter-feedback added
Note: See TracTickets for help on using tickets.