辅助功能：如何抓住鼠标左键旁边的空格键和回车键？

Question

给定一个函数的一部分，当单击鼠标左键时它完美地工作（切换 play/pause 完美的功能）。但是，当使用 tab 键使用仅键盘浏览方法时，按钮被 tab 选中，但按 enter 或 spacebar 不会播放或暂停音频，因此切换不是可通过键盘访问。由于播放按钮在视觉上 impaired/blind 启动了屏幕 reader，并且盲人不使用鼠标，因此必须使用仅使用键盘的方法按下此键：空格键或回车键。如何在当前工作的鼠标左键旁边实现这两个击键，以便所有三个触发器播放和暂停屏幕而不是一个触发器 reader？谢谢，代表未来没有鼠标的盲人用户。

// starts the screen reader
play.addEventListener('click', function() {
    myAudio.play();
});

// pauses the screen reader
pause.addEventListener('click', function() {
    myAudio.pause();
});

jsfiddle 演示适用于鼠标点击，但不适用于 Enter/空格键

Answer 1

注意：为确保准确性，已对此答案进行了编辑。

看完OP的评论后，这就是他们问题的解决方案。

你的新 HTML:

<audio src="http://labs.qnimate.com/files/mp3.mp3"></audio>
<play tabindex="1">PLAY</play>
<pause tabindex="1">PAUSE</pause>

你的新 CSS:

play, pause {
  display: none;
  text-align:center;
  vertical-align:middle;
  width: 200px;
  height: 50px;
  font-size: 30px;
  background: yellow;
  cursor: pointer;
}

play:focus, pause:focus {   /* TABBED BROWSING */
  outline: 2px solid #00F;
}

你的新 JavaScript:

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

function displayControls() {
  play.style.display = "block";
}

// check that the media is ready before displaying the controls
if (myAudio.paused) {
  displayControls();
} else {
  // not ready yet - wait for canplay event
  myAudio.addEventListener('canplay', function() {
    displayControls();
  });
} 

play.addEventListener("keyup", function(event) {
  let KEY = event.code; 
  if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
    myAudio.play();
    play.style.display = "none";
    pause.style.display = "block";
    pause.focus(); // This is very important. Without it the UI breaks.
  }
});

pause.addEventListener("keyup", function(event) {
  let KEY = event.code; 
  if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
    myAudio.pause();
    pause.style.display = "none";
    play.style.display = "block";
    play.focus(); // This is very important. Without it the UI breaks.
  }
});

play.addEventListener('click', function() {
  myAudio.play();
  play.style.display = "none";
  pause.style.display = "block";
});

pause.addEventListener('click', function() {
  myAudio.pause();
  pause.style.display = "none";
  play.style.display = "block";
});

Here is information on what events you can listen for.

Here is information on getting the code for keyboard input.

辅助功能：如何抓住鼠标左键旁边的空格键和回车键？

Accessibility: How to catch the Spacebar and the Enter key, aside the left mouse button?

javascript

keyboard

tabs

keypress

keyboard-events