This page includes various interactive elements to see which ones will work with a spacebar instead of the enter key.

Dog Breed

Radio buttons should change their selected state via the space bar

Dog Treats

Check boxes should change their selected state via the space bar

Buttons should be activated by the space bar

Play and Pause

The space bar should start and stop video and audio. (This video may take a long time to load)

Things that shouldn't work with the space bar

Twitter Feedback

Dylan Barrell points out that the space bar could be used with a link that has role="button" if javascript listens for the key code. Billy Gregory points out that JAWS supports links with role="button" work. Sam explains that JAWS triggers the onClick via spacebar when it has virtual cursor on a link.

What HTML elements are successfully triggered by spacebar? I started a list: http://t.co/qNjnjD4lWr What am I missing?

— ted_drake (@ted_drake) November 12, 2014

@dylanbarrell @ted_drake JAWS kind of automagically handles role="button" on links now. Check the link example with JAWS. spacebar works.

— Billy Gregory (@thebillygregory) November 13, 2014

@thebillygregory @dylanbarrell @ted_drake JAWS fires the onClick when space is pressed and the virtual cursor is on a link. @JonAvilaSSB

— Sam J (@mixolydian) November 13, 2014

Making pseudo-buttons work with JavaScript

Steve Faulkner shows how to listen to the enter key and space bar to make sure pseudo-buttons will work correctly.

3. B. expected keyboard behaviour for buttons

A native HTML button has 2 keys associated with it that will operate it: The enter key and the space. You will need to add scripting that listens for these keys being pressed and activates the custom button action.

...


<img
	src="button.gif" 
    alt="search" 
    role="button" 
    tabindex="0" 
    onkeypress="if(event.keyCode==32||event.keyCode==13){
    	alert('submitted')
    };" 
    onclick="alert('submitted');" >
HTML5 Accessibility Chops: Just use a (native HTML) button