Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

Whenever you add a JavaScript click handler to DOM elements other than the good old button, you should ask yourself if you're using the correct element. Semantic HTML provides additional functionality to assistive technology and it's usually more accessible than "clickable div soup".

Buttons come with keyboard accessibility features built-in. They're focusable and can be clicked by pressing Enter or Space.

But did you know that the two keyboard clicks behave differently?

  • Enter clicks a focused button on press (keydown) and when held, it clicks indefinitely
  • Space clicks a focused button on release (keyup) and won't fire multiple times when held

🤯

If you handroll click functionality (I'm not saying you should — most of the time a button should do it!), reimplementing "this simple button" has more nuance than slapping a "click" handler on it to it.

I found this little fun fact on Adrian's blog. Check out the post to learn more and see this click behavior in action.

A control panel including a button followed by statistics showing how often it was clicked via Enter and Space.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles