Why does twitter.com use div role=button instead of button?
Every accessibility expert will tell you: You should use <button> instead of <div role=button>. There are numerous articles that explain the benefits of <button> in detail.
And then we have top websites like twitter.com that use <div role=button> for everything. There are about 50 such elements on the start page alone.
This juxtaposition creates confusion and doubt. I would really like to know, if <button> is the clear, obvious choice that even junior developers should know to use it, then why do so many top sites choose <div role=button> instead?
2 comments
[ 5.0 ms ] story [ 17.6 ms ] threadSo I guess it's because: https://github.com/necolas/react-native-web/pull/556
Basically some browsers don't support display flex on certain elements like button, using a div instead of a button solves that issue.
Generally: I would suggest to use a button tag unless you run into issues (and know what you are doing).
I don't think using `<div role="button">` is perse worse as long as you implement all the behaviour and styling of the button element like focus, keyboard events and similar.
For juniors, buttons should be taught as the way to go, as with many things in web it's about understanding the pros and cons and knowing why you do something or not. If you don't have a lot of experience, stay away from reimplementing the button tag.