mediaelement-plugins icon indicating copy to clipboard operation
mediaelement-plugins copied to clipboard

Documentation accessibility - How to navigate with keyboard (a11y)

Open neffets opened this issue 5 years ago • 3 comments

It would be helpful to documentate the usage of mediaelement by keyboard.

  • how good is mediaelements player usable per keyboard (key, caveeats, different goals)?
  • which keys can I use (TAB, ENTER, "<", ">", or ???)

Thanx

neffets avatar May 13 '20 09:05 neffets

I use currently following config:

    var config = {
            loop: false,
            enableAutosize: true,
            alwaysShowControls: true,
            clickToPlayPause: true,
            /* Features/Plugins */
            features: ['playpause','current','progress','duration','tracks','volume','speed','fullscreen','a11y','jumpforward'],
            hideCaptionsButtonWhenEmpty: true,
            jumpForwardInterval: 10,
            speeds: ['2.00', '1.50', '1.25', '1.00', '0.75', '0.50'],
            defaultSpeed: '1.00',
            speedChar: 'x',
            speedText: 'Speed Rate',
            /* if tracks are used */
            startLanguage: 'de',
            tracksAriaLive: true,
            /* turns keyboard support on and off for this instance */
            enableKeyboard: true,
            pauseOtherPlayers: true,
            /* 13 = ENTER, 32 = SPACE, 179 = Google-Play/Pause-button keys: [13, 32, 179] */
            keyActions: [
                { keys: [32, 179], action: function(player,media) { (player.paused||player.ended) ? player.play() : player.pause() } }
            ],
            /* youtube specials */
            usePluginFullScreen: false,
            youtubeIframeVars: { nocookie: true, hl: loadjs.lang, controls: 2, rel:0, cc_load_policy: 1, iv_load_policy: 1 },
            youtube: { nocookie: true, hl: loadjs.lang, controls: 2, rel:0, cc_load_policy: 1, iv_load_policy: 1 },
    }

neffets avatar May 13 '20 09:05 neffets

What I found:

  • M - "mute" = toggles between mute and unmute

  • F - "fullscreen" = toggles between fullscreen mode and normal in-page mode

  • SPACE - "play" = toggles between play and stop-mode

  • arrow-left and arrow-right - "timeline" = moves current timeline-position to the "left" (reverse) and "right" (forward)

  • arrow-up and arrow-down - "volume" = increases the volume btw. lowers the volume level

Generally:

  • You can TAB through all Controls
  • For "tracks" you TAB to the tracks-CC-button and next TAB gets you into the Select-list of tracks. In the select-list you can use the up- and down-arrow-keys to go to an option and with ENTER you select it.

The "speed"-plugin haves some issues with keyboard in the select-list the up/down-key gets you only one up/down and then auto-selects options. It should better work the same way, like the tracks-CC-implementation.

neffets avatar May 13 '20 15:05 neffets

esc to exit full screen as alternative for exit fullscreen... See https://github.com/mediaelement/mediaelement/search?q=keyCode&unscoped_q=keyCode

For al the uses of keyCode.

jaapmarcus avatar May 13 '20 17:05 jaapmarcus