HTML button accessibility is a common problem on websites. Keyboard users routinely use the spacebar and the enter key to activate an html button control. When it doesn’t work, blind users can quickly become disoriented. Luckily this problem can be easily resolved by placing a simple JS script file on your website. It does require the jQuery library but most website already have it installed.
The only change that is needed is to add the class names or ids that need to trigger with the spacebar in place of [add class names and ids here (format: .classname, #idname].
// correct spacebar not triggering button clicks keypress
jQuery("body").on("keypress", "[add class names and ids here (format: .classname, #idname]", function (event) {
var code = event.key || event.code; //Get keycode.
if (code != 'Tab' && code != ' ' && code != 'Enter' && code != 'ArrowLeft' && code != 'ArrowUp' && code != 'ArrowRight' && code != 'ArrowDown') //Check each key.
return; //If it isn't any of those, don't worry about it.
if ((code == ' ' || code == 'Enter' || code == 'ArrowLeft' || code == 'ArrowRight') && jQuery(':focus').is('input')) //If a space/enter or left/right arrow is pressed in the input, then allow it to happen as normal.
return;
event.preventDefault()
jQuery(this).trigger('click');
});
