adaptlearning / adapt-contrib-media

A basic media component that displays video and audio. This component uses the HTML5 video and audio specification and has a flash fallback for browsers that don't support HTML5.
GNU General Public License v3.0
7 stars 54 forks source link

Video Speed menu is not accessible #297

Open swashbuck opened 1 month ago

swashbuck commented 1 month ago

Subject of the issue

The _speed player option is not accessible:

  1. The speed selector button does not have a meaningful label for screenreaders. The button is announced by default as the "one point zero zero x button"
  2. The speed selector button is not keyboard accessible. Mouse users can hover over the playback speed button to reveal more options, but when a keyboard users sets focus on the playback speed button and activates it with space or enter, nothing happens. Keyboard users are unable to change their playback speed.

In mediaLibrariesOverrides.js, we override (or add?) aria labels for use with MediaElement.js. So, perhaps we could add a label for speed here.

The focus issue is similar to that of captions. See #232

It may be possible to fix this by updating mediaelement / mediaelement-plugins? See https://github.com/mediaelement/mediaelement-plugins/blob/42dc804df0e98ea8de4d07a736690b72585d9c37/src/speed/speed.js#L110

Steps to reproduce

Add 'speed' to a Media component's player options. For example:

"_playerOptions": {
  "alwaysShowControls": false,
  "hideVideoControlsOnLoad": true,
  "showPosterWhenEnded": true,
  "features": [
    "playpause",
    "progress",
    "fullscreen",
    "volume",
    "speed"
  ]
},

Then, navigate to the option with a screenreader / keyboard navigation.

swashbuck commented 1 month ago

Created #298 to look into updating the MediaElement library.