5 ms·

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.

• rado 6y ago
  button provides free accessibility, using div is terrible.
  • 7786655 6y ago
    You can use <div role=button tabindex=0>.
    • extra88 6y ago
      Tabindex=0 means you can tab to it but you still can’t press Enter or the space bar to activate it like a real button. So now you have to bind a keypress listener. Use a real <button>! You can style it.
      • LeonB 6y ago
        Safari on iOS does not consistently apply HTML standards.
        • extra88 6y ago
          No browser consistently applies HTML standards and nothing but HTML standards. In this case, your complaint is probably about the browser prefixed property and value, -webkit-appearance: button. This is a good article about Overriding Default Button Styles that also touches on why one should use a genuine <button>: https://css-tricks.com/overriding-default-button-styles/ https://css-tricks.com/overriding-default-button-styles/
          • LeonB 6y ago
            Thanks for that link. 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.
            • extra88 6y ago
              It doesn't say to make the -webkit-appearance value 'button', that's the default. Change it to 'none'. Look at the first embedded Codepen, note it also has a -moz-appearance: none, it's not just Safari. 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. https://codepen.io/andybelldesign/pen/Vxpjvo https://codepen.io/andybelldesign/pen/Vxpjvo
              • LeonB 6y ago
                It sounds like you almost saw that there are trade offs involved in the two different approaches. But then just went for pejorative terms a bit more. 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!
  • LeonB 6y ago
    I think “terrible” is a bit much. With a little work a div can be both accessible and styled appropriately (without having to know platform specific ways to reset it) The scenario above is for a game. The look of the button should be pixel perfect to suit the game.
• reificator 6y ago
  Why does your "need" for pixel perfect styling trump your users' need for accessible interfaces?
  • LeonB 6y ago
    I was building a game and wanted to control the appearance of the buttons.
    • reificator 6y ago
      And you'd rather people not be able to play the game or have a harder time rather than let the styles be a little different?
      • LeonB 6y ago
        Sorry, what? Where is this hostility coming from? I’m not against accessibility. 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.
        • reificator 6y ago
          > 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?
          • LeonB 6y ago
            In a game, you are creating a world and bringing the player into that world. The pixels are part of how that is done. They matter a lot. 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.