button element is old, solid, technology that gives us all the interactions and accessibility we need out of the box. Using a
div instead means we need to add a whole bunch of stuff just to fake a button.
What buttons need to be buttons
My two favourite places for checking HTML-y accessibility-y stuff are MDN and ARIA Authoring Practices Guide.
A button must:
- look like a button;
- receive keyboard focus;
- activate on Space;
- activate on Enter;
- have an accessible name;
- have a
button element gives you all of these things for free. And because it’s very old, very basic, HTML, it’s very well supported across different operating systems / browser / assistive technology combinations.
One thing to point out is where the accessible name comes from. A button can get its accessible name from:
- the text inside the button;
- the text alternative of an image inside the button (
We prefer earlier items on the list. This is because of the First Rule of ARIA Use: use HTML instead of ARIA if we can (and we usually can).
What we need to add to a
div to make it a button
We need to add pretty much all the things that buttons do out of the box. It must:
- look like a button. We can add styles.
- receive keyboard focus. We can add
- activate on Space. We can add event listeners.
- activate on Enter. We can add event listeners.
- have an accessible name. We can add an
aria-labelattribute or an
- have a
button. We can add
Although all these are relatively low complexity, it’s a lot to add to a
div, when a
button would give us all this for free. In addition, it requires us to add ARIA, which gives us a reason to think about the First Rule of ARIA Use again, and wonder if we couldn’t do this with HTML instead.
button, not a