Accessibilité: Comment attraper la barre d'espace et la touche Entrée, en dehors du bouton gauche de la souris?

Question

Étant donné une partie d'une fonction, cela fonctionne parfaitement lorsque l'on clique sur le bouton gauche de la souris (active/pause la fonction parfaitement fonctionnelle). Toutefois, lorsque vous utilisez une méthode de navigation au clavier uniquement à l'aide de la touche de tabulation, le bouton est sélectionné avec l'onglet mais en appuyant sur enter ou spacebar ne lit pas ou ne met pas en pause l'audio, le bouton n'est pas accessible au clavier. Puisque le bouton de lecture lance le lecteur d'écran pour les malvoyants/aveugles, et que les aveugles n'utilisent pas de souris, cette touche doit être enfoncée en utilisant une méthode au clavier uniquement: une barre d'espace ou une entrée. Comment mettre en œuvre ces deux frappes à côté du bouton gauche de la souris qui fonctionne actuellement au lieu d'un déclencheur, les trois déclencheurs jouent et mettent en pause le lecteur d'écran? Merci, au nom des futurs utilisateurs aveugles sans souris.

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

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

jsfiddle démo fonctionne avec un simple clic de souris, mais pas Entrée/Barre d'espace keypress

Answer 1

Note: Cette réponse a été modifiée pour la précision. Après avoir lu le commentaire de OP, voici la solution à leur problème.

Votre nouveau HTML:

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

Votre nouveau 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; 
} 

Votre nouveau 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.