We are working on fixing some accessibility issues on our video player, one of which is the ability to scrub through the video with the keyboard. We have the following code, which pauses the video on keydown and scrubs the video forward/backward and then on keyup it plays the video at the new point.
The issue is that in IE11 with JAWS the keydown event does not keep firing while the key is held down. It goes back and forth between keydown and keyup. The result is an endless loop of moving one second forward and then going back to the original point in the video and playing.
Here is the code that we are using currently, is there anything that we can do to make this work with JAWS?
document.addEventListener("keydown", function(ev) {
if (ev.keyCode === 37 || ev.keyCode === 39) {
console.log("keydown");
}
});
document.addEventListener("keyup", function(ev) {
if (ev.keyCode === 37 || ev.keyCode === 39) {
console.log("keyup");
});
happy to add any additional information you may need or to answer any questions, just let me know
The problem you are having is to do with how JAWs intercepts key presses and uses a virtual cursor.
When pressing left and right it is attempting to say the previous and next character and so it intercepts the key press, does the action and passes the left arrow key to the browser once as it is in 'document browsing mode'.
One way to stop this behaviour is to use role="application" and this signals screen readers to pass all information through to the browser normally.
Obviously you need to read all the documentation on role="application" as you could introduce accessibility issues rather than fix them if you aren't careful!
W3 Role - application information
When the user navigates an element assigned the role of application, assistive technologies that typically intercept standard keyboard events SHOULD switch to an application browsing mode, and pass keyboard events through to the web application. The intent is to hint to certain assistive technologies to switch from normal browsing mode into a mode more appropriate for interacting with a web application; some user agents have a browse navigation mode where keys, such as up and down arrows, are used to browse the document, and this native behavior prevents the use of these keys by a web application.