I can’t always use “button” for buttons because safari on iOS enforces its own style for those. Consequently, I end up with DIVs as buttons.
The trade off here is between trying overcome default styles of buttons on every single platform (hard! But necessary for a game) versus treating a div as a button on every single platform (not as hard)
Please don’t simplify it to mean that by highlighting that this trade off exists I am uninterested in accessibility. You don’t know my journey.
True, I don't know your journey. But I do know that some percent of the time you use divs as buttons and your only justification for doing so is styling.
Why is pixel perfect styling of buttons "necessary for a game" anyway?
If you don’t think it’s reasonable for game designers to want complete control of the pixels inside a game they’re building then just walk away from this conversation. It’s a multi billion dollar industry that you’ve taken no notice of before now. I’m not about to convince you of its validity by typing characters into this textbox.
Use a real <button>! You can style it.
This is a good article about Overriding Default Button Styles that also touches on why one should use a genuine <button>:
I’ve read so many of these, and it all comes down to a trade off which they decide goes a particular way but I don’t feel convinced by their reasoning. It still seems like, in cases where the appearance has to be pixel perfect you can either: add a few lines of accessibility code to a .button (which is consistently described every where I look), or add many many more lines of css reset code, which is quite opaque. The article you linked says that to reset the style... you end up applying -webkit-appearance:button. Whereas I thought the style reset would include removing that? Other sources online say that’s warranted.
There is a choice to be made, and the sort of “semantic-fundamentalism” preaching I see in these articles seems to be used as a way to avoid truly weighing up the options. They treat guidelines as laws and try to justify it from there. For me: it depends.
I don't understand why someone would want to add multiple attributes plus a JavaScript keypress listener to the wrong element when you can instead add basically reusable "reset" CSS to the right element (<button>).
You're making choices for the people using a site. If you use a <button> and don't get the CSS right, it doesn't always look the way you'd like for some people; if you don't use a <button> and an attribute or the JavaScript is wrong, it doesn't work at all for some people.
You don't have total control over the appearance of everything in the browser anyway. Some people want or need to make changes (higher contrast, more readable font, etc.) to use the web and not using appropriate elements just makes it harder for them to do that.
There are some scenarios where total control of the style is an important part of the thing being built.
I’m closing the browser now. I do appreciate the many constructive parts of what you’ve said. The preaching about what’s “wrong” I can skip. Like there’s some grand moral imperative not to connect a click handler to a div. Spare me!
The scenario above is for a game. The look of the button should be pixel perfect to suit the game.