WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#41290 new defect (bug)

Embedded videos not keyboard accessible once video is playing

Reported by: GrahamArmfield Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Embeds Keywords:
Focuses: accessibility Cc:

Description

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.

Change History (7)

This ticket was mentioned in Slack in #forums by xkon. View the logs.


6 weeks ago

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


5 weeks ago

#3 follow-up: @joedolson
5 weeks ago

  • Keywords reporter-feedback added

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.

#4 in reply to: ↑ 3 @GrahamArmfield
5 weeks ago

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?

#5 @joedolson
5 weeks ago

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

#6 @afercia
5 weeks ago

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.

Last edited 5 weeks ago by afercia (previous) (diff)

#7 @afercia
5 weeks ago

  • Keywords reporter-feedback removed
  • Version 4.8 deleted

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"

https://cldup.com/wlw3n4aVFU.jpg

https://cldup.com/CMURn6XG8I.jpg

Note: See TracTickets for help on using tickets.