Photo of Terence Eden. He has a beard and is smiling.

Improving WordPress Video Accessibility

· 2 comments · 200 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.

A video with an impossible to see play button.

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:

A video with an easy to see play button.

I've submitted a pull request to fix it.

Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

2 thoughts on “Improving WordPress Video Accessibility”

  1. said on beko.famkos.net:

    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.
    Reply | Reply to original comment on beko.famkos.net

  2. says:

    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!
    Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">