Accessibility glitch when editing an embedded video

[Presskopp]

to reproduce: make a new page and enter video shortcode for embedding a video like

[video src="https://www.youtube.com/watch?v=KF8bGYks-bk"]

in text mode. Switch to Visual Mode, click to edit the video.

Above the URL of the video will be an area (titled SRC) where you have a mouse pointer like if it was a link, but it isn't. See screenshot..

The label "SRC" is hardcoded in \wp-includes\media-template.php L.1044/1127

[joemcgill]

Thanks @Presskopp is this new to Trunk or is this reproducible in the current stable version of WP (4.6.1) as well?

[Presskopp]

same in 4.6.1

[joemcgill]

Thanks for confirming. Since this isn't a regression, let's look at this in a future release.

[lukecavanagh]

@Presskopp

Confirmed the issue is reproducible in 4.7-beta3-39201.

[afercia]

SRC is just the label for the input field. In other places, for example the attachments browser, a similar field has a URL label and the field is readonly but not disabled. This allows, at least, to copy and select the URL:

I'd suggest to rename the label and make the field (also the other ones for additional sources) enabled and readonly.

An additional a11y issue here is that, inside the label, there's also the button to remove the video source. This button should be moved out from the label.

Side note: I think this was added in [27411] and the buttons later.

[Presskopp]

related #40468

[afercia]

Looking a bit into this, there are a few occurrences in the media templates where <label> elements are used incorrectly:

• to wrap just text (no form controls)
• to wrap an input field and a button
• to wrap a mix of the two cases above

Label elements should be used just for labelable elements. 38759.diff​ is a first attempt to fix most of these cases and produce valid, semantic markup. As per the ​accessibility standards, labels should be associated using for/id attributes.

The patch can be certainly improved and need testing. Given how so badly associated labels impact accessibility, I'd like to propose to try to fix this in 4.9.

[jbpaul17]

Per discussion in today's 4.9 bug scrub, we're punting this to 4.9.1.

[afercia]

Refreshed patch, includes also a few minor coding standards. Since we're at the beginning of the 5.0 release cycle, I'd propose to merge this now, as this is the best way to test it extensively.

[afercia]

In 42444:

Accessibility: Media: Improve the usage of a few label elements in the media templates.

Label elements should only be used for labelable elements.

• Uploaded By and Uploaded To aren't form controls and shouldn't be associated with labels
• changes the labels for media source, alternate sources, poster image, and tracks to solve a layout issue and explicitly associate the labels to their form fields (previously, the labels were wrapping also the Remove buttons)

Props Presskopp, afercia.
Fixes #38759, #40468.

[SergeyBiryukov]

Reopening for 4.9.9 consideration, per the latest Accessibility team bug scrub meeting.

[pento]

In 43829:

Accessibility: Media: Improve the usage of a few label elements in the media templates.

Label elements should only be used for labelable elements.

• Uploaded By and Uploaded To aren't form controls and shouldn't be associated with labels
• changes the labels for media source, alternate sources, poster image, and tracks to solve a layout issue and explicitly associate the labels to their form fields (previously, the labels were wrapping also the Remove buttons)

Merges [42444] to the 5.0 branch.

Props Presskopp, afercia.
Fixes #38759, #40468.