::Last-Child – Ted Drake

Keyboard Accessibility with the Space Bar

Fingers on a keyboard

Summary

This page includes various interactive elements to see which ones will work with a space bar.

Keyboard accessibility is critical for your users that depend on voice recognition, onscreen keyboards, screen readers, ergonomic accessories, and your power users that prefer to avoid grabbing the mouse for every task. Most people test to make sure every interactive element can receive focus via the tab key and that buttons and links work with the enter key. We’ve gotten pretty good at making sure links have href attributes and using role=”button” on our pseudo-buttons.

But this doesn’t cover a significant portion of keyboard accessibility: the space bar. This page includes various interactive elements to see which ones will work with a space bar.

As developers, you don’t have to worry about whether an element works correctly with a spacebar if you use the proper, semantic tag. But if you find yourself re-assigning roles with ARIA than you may need to listen for the space bar key.
View the test page

Objects activated by the spacebar

Radio buttons and check boxes

Radio buttons should change their selected state via the space bar

Dog Breed



Check boxes should change their selected state via the space bar

Dog Treats



Buttons

Buttons should be activated by the space bar and enter key

  • button:
  • input type=”submit”:

Play and Pause

The space bar should start and stop video and audio.

Things that shouldn’t work with the space bar

Links

Here’s the catch, you’ve created a pseudo-button with a link and added role=”button” to let the user know this is actually going to behave like a button.

<a href="#" role="button">Close</a>

But are you listening for the spacebar key?

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.

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

Recommendation

Going back to the first rule of ARIA, use the correct tag before adding a role attribute to create a pseudo-element. This will inherit the standard user interactions and your users will not be confused when the application doesn’t behave as expected.

Ted Drake

, , ,