Why prefer <button> over a <div onclick>?
Options
- It is shorter and quicker to type in HTML code
- Free keyboard support, focus and screen reader role (Correct option)
- A
divcannot be styled with CSS properties - Buttons load faster than divs in all browsers
Answer
Native keyboard support, focus, and correct role for screen readers come for free
Why
A <button> can be reached with Tab, activated with Enter or Space, and is announced as 'button' by screen readers, all automatically.
A clickable <div> does none of that; keyboard and screen-reader users cannot use it unless you add role, tabindex and key handlers yourself.
Using the right HTML element for its purpose is called semantic HTML.
Remember
Use real buttons, links and labels: accessibility for free.