Skip to main content

{clairecodes}

The roles of Spacebar and Enter in keyboard navigation

  1 minute read
  Categories: 

Did you know, that not everyone uses a mouse to navigate the world wide web? You can use a keyboard to interact with a webpage too. (But you already knew that.) Different elements on a page respond to different keypresses. I always forget what the spacebar and enter keys do, so here’s a quick reminder.

Key Expected functions
Spacebar
  • activate buttons
  • check/uncheck checkbox
  • scroll down the page
  • expand a dropdown menu
Enter
  • activate buttons
  • open links
  • open menus

Or the key bit I always forget:

Element to access Key
Link
  • Enter
Button
  • Enter
  • Spacebar

Will this always work?

This isn’t always going to work, because that thing that looks like a link is actually a span with an underline applied to it and the developer hasn’t attached replacement key events or aria roles to it. Just because it looks like a button, or dropdown, or radio button, doesn’t mean it is. But this is what to expect in a perfect, fully accessible world wide web.

Reference: Keyboard Accessibility on WebAIM