There is a huge difference. First of all, a DIV is a meaningless construct. Even those two attributes will not mimic all the built-in functions, a button has. A button comes with multiple functions and abilities, that you must rebuild with JavaScript, if you don't use a button-element.
One of the first rules of frontend-development is to use the thing that is supposed to be used. So if you need a button and don't use one, you are not lazy, because you would have to care for many things, but you don't have enough knowledge. Because using a div or span instead of a button is nothing more than bad craftsmanship. But with a little more caring for the details this will be fine. Just don't believe, that only JS is important and HTML and CSS aren't necessary.
If you use semantic HTML in the way it was meant you are free of many unneccessary thoughst regarding JS-workarounds. And writing <button type="button"> is easier and faster than <div class="button" role="button" tabindex="0"> and all the supporting JS.
But the most important take-away for you should be to read the smashingmagazine-article. Please do!
You didn't read my response? I told you that there IS a difference. A huge difference. And as this difference is huge the article reflects it better than I could in a comment.
Your code is a meaningless div which is shaped into something that could be a button. And only with many JS will be. As a button has already everything built in and works as intended.
To be clear: someone who uses your code tells me, he doesn't care for frontend. That's the reason I stopped reading. But you could be helped. HTML and CSS aren't by far as complicated as JS or PHP. The basics are simple to grasp if you understand, that it has NOTHING to do with programming.
You have so strong feelings about it, so harsh response, so I thought you have something explicit on your mind. I thought you are an expert in the subject that is why you got triggered. So I asked the question: "hey what the difference?". And you sent me a link to smashing magazine. Thanks, but I know how to search the internet myself, as well I'm familiar with smashing magazine I was explicitly interested in your opinion, why so strong feelings.
First of all, a DIV is a meaningless construct
Isn't <div role="button" add meaning?
Even those two attributes will not mimic all the built-in functions, a button has
Which one won't be mimicked?
If you use semantic HTML
Semantic is meaning. Isn't <div role="button" have the same meaning as a button?
And writing <button type="button"> is easier and faster than <div class="button" role="button" tabindex="0">
Oh yes, I AM an expert in this field. But the comment to an article is not the place to write an article, itself. And seeing this code I thought you could need a hint to a good article.
It's good that you know smashingmagazine but as they publish loads of article, this one must have slipped your eyes. Otherwise your example wouldn't be as criticised.
And as I pointed you to the article I don't see a use in telling you all the built-in functions, a button has. Read the artice, it is really good.
I do have a strong opinion on this because I know HTML and CSS very good. And I am teaching and writing articles for more than 13 years. So I do know how to write an article. And I am alsways amazed about articles with huge faults in them.
As I am not good in JavaScript and all those frameworks I rely on articles as yours. But reading those articles and learning from others is a matter of trust. So if I do know that a part of an article is wrong and is bad code, how am I to trust the rest? Maybe the rest is okay by itself. The article wouldn't on the other hand be a guiding light for my own learning experience because I wouldn't be able to follow your code (as I know HTML better).
And for your questions about the role: Read something short about WAI-ARIA. The first rule of WAI-ARIA is: "Don't use WAI-ARIA!". Meaning: if there is somiething in HTML which can be used, use it. So, don't mimic a button, use a button. There are five simple rules of ARIA. And none reads: Make anything out of a DIV with a sprinkle auf attributes.
ARIA-attributes are a help where help is needed. And in case of a button or a haeding, noe help is needed. <div role="heading">THis is dumb code!</div> isn't good either.
Can you be more specific? Like, if you would use <div role="button">, instead of a button in this browser (or screen reader), exactly this functionality will not work as expected.
As of now, it sounds like a matter of taste.
The first rule of WAI-ARIA is: "Don't use WAI-ARIA!"
Are there real consequences of using one over another? Better browser support, maybe?
You just repeat common phrases (in all 3 comments without explaining): "huge difference" (what?), "built-in functions" (what are those?), " is bad code" (based on which metrics?)
As I told you multiple times before: read the smashingmagazine article. It shows the mannifold aspects of a button that aren't recreated by a simple attribute.
Besides: if you know it should be a button and you use an attribute, why not use the element in the first place?
That's not a matter of taste. It's a matter of using something as intended. There maybe something similar in JS, but maybe not. In HTML there are elements with a certain meaning. If they were not you could just write a page with div. Funny thing is: you could. But it would be bad code. And tahat is not a matter of taste. Because if there is something that should be used as intended and you don't use it, but otherwise use another element which you try to change as much as it is possible to mimic the originally intended element. How would you call that? Interesting idea? Crativity?
I call it bad code. And bad code should only be a vehicle in an article to tell you, what NOT to write.
And please, if you would only read the article and read something about WAI-ARIA you would understand my "common phrases". I don't intend top write a second article in the comments. I only tell you, where in my opinion you are wrong and where you can find guidance to be better. We all should thrive to be better. If you don't get this sentiment, all other comments from my side would be useless.
I should write an article about writing an article.
It is ok to not know everything.
It is ok to say I got triggered never mind.
It is ok to say this is the best practice (mantra, rule of thumb), which I follow and never questioned myself.
It isn't ok to call code bad without explaining why. I can quote Kurt Vonnegut on this: "Dr. Hoenikker used to say that any scientist who couldn't explain to an eight-year-old what he was doing was a charlatan".
I don't intend top write a second article in the comments
I didn't ask you to write an article I asked to pinpoint at least one example to show the difference between button and div role="button".
What’s the difference between <button type="button"> and <div class="button" role="button" tabindex="0">, you ask? It’s the behavior.
In her talk “ARIA, accessibility APIs & coding like you give a damn!”, Léonie Watson demonstated what it would take to turn a <div> into a button. And it takes a lot! (Video • Slides)
TL;DR: Don’t do it! Use the <button> element.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
There is a huge difference. First of all, a DIV is a meaningless construct. Even those two attributes will not mimic all the built-in functions, a button has. A button comes with multiple functions and abilities, that you must rebuild with JavaScript, if you don't use a button-element.
There is a great article on smashingmagazine: smashingmagazine.com/2019/02/butto...
One of the first rules of frontend-development is to use the thing that is supposed to be used. So if you need a button and don't use one, you are not lazy, because you would have to care for many things, but you don't have enough knowledge. Because using a div or span instead of a button is nothing more than bad craftsmanship. But with a little more caring for the details this will be fine. Just don't believe, that only JS is important and HTML and CSS aren't necessary.
If you use semantic HTML in the way it was meant you are free of many unneccessary thoughst regarding JS-workarounds. And writing
<button type="button">is easier and faster than<div class="button" role="button" tabindex="0">and all the supporting JS.But the most important take-away for you should be to read the smashingmagazine-article. Please do!
So no difference you say. You wrote that long message and didn't make one (at least one) simple example that would explain the difference.
Strong opinion weakly held.
You didn't read my response? I told you that there IS a difference. A huge difference. And as this difference is huge the article reflects it better than I could in a comment.
Your code is a meaningless
divwhich is shaped into something that could be a button. And only with many JS will be. As a button has already everything built in and works as intended.To be clear: someone who uses your code tells me, he doesn't care for frontend. That's the reason I stopped reading. But you could be helped. HTML and CSS aren't by far as complicated as JS or PHP. The basics are simple to grasp if you understand, that it has NOTHING to do with programming.
You have so strong feelings about it, so harsh response, so I thought you have something explicit on your mind. I thought you are an expert in the subject that is why you got triggered. So I asked the question: "hey what the difference?". And you sent me a link to smashing magazine. Thanks, but I know how to search the internet myself, as well I'm familiar with smashing magazine I was explicitly interested in your opinion, why so strong feelings.
Isn't
<div role="button"add meaning?Which one won't be mimicked?
Semantic is meaning. Isn't
<div role="button"have the same meaning as a button?true
Oh yes, I AM an expert in this field. But the comment to an article is not the place to write an article, itself. And seeing this code I thought you could need a hint to a good article.
It's good that you know smashingmagazine but as they publish loads of article, this one must have slipped your eyes. Otherwise your example wouldn't be as criticised.
And as I pointed you to the article I don't see a use in telling you all the built-in functions, a button has. Read the artice, it is really good.
I do have a strong opinion on this because I know HTML and CSS very good. And I am teaching and writing articles for more than 13 years. So I do know how to write an article. And I am alsways amazed about articles with huge faults in them.
As I am not good in JavaScript and all those frameworks I rely on articles as yours. But reading those articles and learning from others is a matter of trust. So if I do know that a part of an article is wrong and is bad code, how am I to trust the rest? Maybe the rest is okay by itself. The article wouldn't on the other hand be a guiding light for my own learning experience because I wouldn't be able to follow your code (as I know HTML better).
And for your questions about the role: Read something short about WAI-ARIA. The first rule of WAI-ARIA is: "Don't use WAI-ARIA!". Meaning: if there is somiething in HTML which can be used, use it. So, don't mimic a button, use a button. There are five simple rules of ARIA. And none reads: Make anything out of a DIV with a sprinkle auf attributes.
ARIA-attributes are a help where help is needed. And in case of a button or a haeding, noe help is needed.
<div role="heading">THis is dumb code!</div>isn't good either.Is it clearer now? And please read the article.
Can you be more specific? Like, if you would use
<div role="button">, instead of a button in this browser (or screen reader), exactly this functionality will not work as expected.As of now, it sounds like a matter of taste.
Are there real consequences of using one over another? Better browser support, maybe?
You just repeat common phrases (in all 3 comments without explaining): "huge difference" (what?), "built-in functions" (what are those?), " is bad code" (based on which metrics?)
Can you be more specific?
As I told you multiple times before: read the smashingmagazine article. It shows the mannifold aspects of a button that aren't recreated by a simple attribute.
Besides: if you know it should be a button and you use an attribute, why not use the element in the first place?
That's not a matter of taste. It's a matter of using something as intended. There maybe something similar in JS, but maybe not. In HTML there are elements with a certain meaning. If they were not you could just write a page with
div. Funny thing is: you could. But it would be bad code. And tahat is not a matter of taste. Because if there is something that should be used as intended and you don't use it, but otherwise use another element which you try to change as much as it is possible to mimic the originally intended element. How would you call that? Interesting idea? Crativity?I call it bad code. And bad code should only be a vehicle in an article to tell you, what NOT to write.
And please, if you would only read the article and read something about WAI-ARIA you would understand my "common phrases". I don't intend top write a second article in the comments. I only tell you, where in my opinion you are wrong and where you can find guidance to be better. We all should thrive to be better. If you don't get this sentiment, all other comments from my side would be useless.
I should write an article about writing an article.
It is ok to not know everything.
It is ok to say I got triggered never mind.
It is ok to say this is the best practice (mantra, rule of thumb), which I follow and never questioned myself.
It isn't ok to call code bad without explaining why. I can quote Kurt Vonnegut on this: "Dr. Hoenikker used to say that any scientist who couldn't explain to an eight-year-old what he was doing was a charlatan".
I didn't ask you to write an article I asked to pinpoint at least one example to show the difference between
buttonanddiv role="button".Read the linked article. The author explaines everything you need.
Button
What’s the difference between
<button type="button">and<div class="button" role="button" tabindex="0">, you ask? It’s the behavior.In her talk “ARIA, accessibility APIs & coding like you give a damn!”, Léonie Watson demonstated what it would take to turn a
<div>into a button. And it takes a lot! (Video • Slides)TL;DR: Don’t do it! Use the
<button>element.