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 onkeydown
Space
clicks a focused button onkeyup
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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.