辅助功能：如何在鼠标左键旁边捕捉空格键和 Enter 键？

Question

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

// 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.