"A semantic <button> element makes a lot more sense than reaching for a <div> because, well, semantics. At least that's what the code smell triggers for me. I can generically name some of the semantical benefits we get from a <button> off the top of my head: Interactive states Focus indicators Keyboard support But I find myself unable to explicitly define those benefits. They're more like talking points I've retained than clear arguments for using <button> over <div>."
"There's clearly a difference between the two "buttons" and it's more than visual. Notice a few things: The <button> gets exposed as a button role while the <div> is a generic role. We already knew that. The <button> gets an accessible label that's equal to its content. The <button> is focusable and gets a click listener right out of the box."
A semantic <button> element provides built-in interactive states, visible focus indicators, keyboard support, and an accessible role and label. DevTools exposes a native <button> as role="button", assigns an accessible label equal to its content, makes it focusable, and wires click behavior automatically. A <div> with role="button" appears as a generic role and does not include those built-in behaviors by default. Styling conventions and user agent defaults often lead developers to choose <div> for easier styling, but using <button> avoids accessibility gaps and reduces the need to reimplement focus, keyboard, and ARIA behaviors manually.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]