The roles of Spacebar and Enter in keyboard navigation
6 November 2019
1 minute read
Categories:
/a11y
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 |
|
Enter |
|
Or the key bit I always forget:
Element to access | Key |
---|---|
Link |
|
Button |
|
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