Take a look at the example below. Here, we have two identical button elements. However, the first element uses the <button> tag while the second uses the <div> tag.
Illustration of similar button design using 'button' and 'div'
But a button should:
Be focusable via the keyboard.
Support being disabled.
Support the
ENTERorSPACEkeys to perform an action.Be announced properly by a screen reader (Press Command-F5 to Turn VoiceOver on or off on Mac).
A div button has none of these things. We need to write additional code to replicate what the button element gives you for free!
For example, button elements have a neat trick called synthetic click activation. If you add a "click" handler to a button, it will run when the user presses ENTER or SPACE. A div button doesn't have this feature, so you'll need to write additional code to listen for the keydown event, check that the keycode is ENTER or SPACE, and then run your click handler. That's a lot of extra work!
Compare the difference in this example. TAB to either control, and use ENTER and SPACE to attempt to click on them.