Improving WordPress Video Accessibility
By @edent
· a11y accessibility HTML5 Open Source WordPress · 2 comments · 150 words
In order to provide a video playback UI, WordPress uses the excellent MediaElement library. Recently, I discovered a slightly annoying flaw - I couldn't see the play button!
Here's a screenshot of the video UI.
In the middle of this screenshot is a white play button. I have trouble seeing it, because the video's background colour is predominantly white.
The issue is with the mejs-controls.svg - the graphic which contains the interface controls. I think it could be made more accessible with the following changes:
- Make the background of the button a transparent grey.
- Move the play triangle to the foreground.
A pretty simple fix!
This creates a semi-transparent grey background, with a white stroke. So the play button will be visible no matter the colour of the background video. Here's what it looks like:
Mastodon
Twitter
Facebook
LinkedIn
Reddit
HackerNews
Lobsters
Pocket
WhatsApp
Telegram
I’m missing the subtitles for videos in WordPress. In earlier versions there was an option for this. So every time I’m adding subtitles manually, that I do on my occasional videos, I’ve to edit the HTML of the Gutenberg block. It’s easy with HTML5 but now the Gutenberg editor will render the block as invalid so any further change has to be done in the source too. Like adding additional video container formats so clients can make their own choice depending on supported encoding.
I have had this issue as a WordPress user and I find it annoying too. It means I avoid embedding video. Thank you for making this pull request!