Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation accessibility - How to navigate with keyboard (a11y) #174

Open
neffets opened this issue May 13, 2020 · 3 comments
Open

Documentation accessibility - How to navigate with keyboard (a11y) #174

neffets opened this issue May 13, 2020 · 3 comments

Comments

@neffets
Copy link

neffets commented May 13, 2020

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
Copy link
Author

neffets commented May 13, 2020

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
Copy link
Author

neffets commented May 13, 2020

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.

@jaapmarcus
Copy link
Contributor

jaapmarcus commented May 13, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants