Keyboard button clicks with Space and Enter behave differently (#tilPost)

Whenever you add a JavaScript click handler to DOM elements other than the good old button, you should hold on and ask yourself if you’re using the correct element. Semantic HTML provides additional functionality to assistive techno…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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

For example, 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 keys click buttons differently?

  • Enter clicks a focused button on keydown
  • Space clicks a focused button on keyup

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


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2022-04-21T22:00:00+00:00) Keyboard button clicks with Space and Enter behave differently (#tilPost). Retrieved from https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/

MLA
" » Keyboard button clicks with Space and Enter behave differently (#tilPost)." Stefan Judis | Sciencx - Thursday April 21, 2022, https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/
HARVARD
Stefan Judis | Sciencx Thursday April 21, 2022 » Keyboard button clicks with Space and Enter behave differently (#tilPost)., viewed ,<https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Keyboard button clicks with Space and Enter behave differently (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/
CHICAGO
" » Keyboard button clicks with Space and Enter behave differently (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/
IEEE
" » Keyboard button clicks with Space and Enter behave differently (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/. [Accessed: ]
rf:citation
» Keyboard button clicks with Space and Enter behave differently (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2022/04/21/keyboard-button-clicks-with-space-and-enter-behave-differently-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.