Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Semantic HTML elements like <button> provide built-in accessibility features that generic <div> elements lack, including proper role exposure, automatic focus management, keyboard support for Space and Return keys, and accessible labeling. While developers might choose <div> for easier styling, recreating these native behaviors requires significant JavaScript and ARIA attributes. Browser DevTools can inspect these semantic differences directly, revealing how assistive technologies interpret elements differently.

Explaining the Accessible Benefits of Using Semantic HTML Elements

<p>All fun n games until you need to nest a button in a button and absolute positioning is not an option…</p>
<p>having a button inside of a button is not semantic but something that exists all the time in the real world, for example a three dot menu on a button</p>
<p>At my company we have components called &lt;DivButton&gt; and &lt;ClickBlocker&gt; just for this usecase, where the DivButton properly handles all the accessibility stuff and the ClickBlocker basically just calls e.stopPropagation() for clicks and some keyboard keys.</p>
<p>Would love to find a better and more semantic solution for this. Any ideas?</p>
