Embedded videos not keyboard accessible once video is playing

[GrahamArmfield]

There are problems trying to operate videos embedded with the native editor in WordPress if I'm a keyboard only user.
Before the video has started playing I can tab to most of the various video controls and clearly see where I am. However, a few seconds after the video has started playing, the controls disappear. It's now impossible to see where keyboard focus is and to easily operate the rest of the controls using a keyboard.

Ideally, the controls should become visible again whenever I press tab or shift-tab - like they do if I hover over the video with a mouse pointer.

I have made a video to demonstrate the issue: ​https://youtu.be/7N1-Ch7QbtA

I'm running Chrome 59 on Windows 10. WP version 4.8 on PHP7.

[joedolson]

It looks, according to your video, like what you're doing is pasting a WordPress.tv URL into the post. That's going to result in an oEmbed external video player from WordPress.tv, which isn't something we can address directly in WordPress. However, we can raise the issue with the WordPress.com media player team, to see if we can address it there.

If you can confirm that this is the WordPress.tv player, that would be helpful. I can see that the same problem you describe does exist on WordPress.tv, so I'm betting that I'm right about this.

[GrahamArmfield]

Replying to joedolson:

It looks, according to your video, like what you're doing is pasting a WordPress.tv URL into the post. That's going to result in an oEmbed external video player from WordPress.tv, which isn't something we can address directly in WordPress. However, we can raise the issue with the WordPress.com media player team, to see if we can address it there.

If you can confirm that this is the WordPress.tv player, that would be helpful. I can see that the same problem you describe does exist on WordPress.tv, so I'm betting that I'm right about this.

Yes Joe, you are right, I did just include the URL of the WordPress.tv video into the post. This is the first time I've wanted to embed a video from WordPress.tv so I though this would be the right way.

Do you know of a better way to include a WordPress.tv video that is more keyboard accessible? Does your plugin help with this?

[joedolson]

Probably the best way to include a WordPress.tv video is to source it from the WordPress.tv YouTube channel, if you can:

​https://www.youtube.com/channel/UCdof4Ju7amm1chz1gi1T2ZA

[afercia]

Testing the original video on WordPress.tv ​https://wordpress.tv/2017/05/30/graham-armfield-designing-for-accessibility/ looks like the WordPress.tv player makes its controls visible again just on hover and not on focus. Actually, the controls are still focusable and it is possible to tab through them, they just stay hidden.
This should be reported upstream and looks like an easy fix.

[afercia]

Looking a bit more in depth, seems the WordPress.tv player has also other important issues and many basic things could be improved:

• some controls are not labeled, for example Play and Full-screen; the only "name" available there is the SVG title element, which is not consistently supported across browsers and assistive technologies
• the volume control is not operable with a keyboard
• some elements use a CSS class similar to screen-reader-text but then they also use display: none, not sure why; see for example "Closed Captions" and "Enable HD Quality"

[GrahamArmfield]

Replying to afercia:

Looking a bit more in depth, seems the WordPress.tv player has also other important issues and many basic things could be improved:

• some controls are not labeled, for example Play and Full-screen; the only "name" available there is the SVG title element, which is not consistently supported across browsers and assistive technologies
• the volume control is not operable with a keyboard
• some elements use a CSS class similar to screen-reader-text but then they also use display: none, not sure why; see for example "Closed Captions" and "Enable HD Quality"

I've seen on the mediaelement github (and on WP Tavern) that there appear to have been some tweaks for keyboard accessibility within the 4.2.6 version that will be within WP 4.9. See ​https://github.com/mediaelement/mediaelement/blob/master/changelog.md

I don't currently have access to a beta environment but could it be that WP 4.9 will fix the issues raised by myself and @afercia?

[afercia]

wordpress.tv still uses a different player which has some issues, this should be reported on the meta Trac. In core, I've tested a mp4 video in the Classic Editor (mediaelement.js player) and in the new Block Editor (native Chrome video player). Controls disappear when playing but it is possible to make them re-appear, at worse with some back and forth tabbing with the keyboard.

I'm going to close this ticket and report the issue on the meta Trac. Please do feel free to reopen, or better open a new ticket for any issue related to WordPress core.

[afercia]

See ​https://meta.trac.wordpress.org/ticket/4080