October 31, 2025
Click-clash of the DIV-il
Just Use a Button
Dev internet erupts: stop using boxes as buttons
TLDR: A viral post says: stop making clickable boxes and use real buttons so keyboards and screen readers work right. Most commenters agree, but some challenge the details about focus order and assistive tech, underscoring how tiny markup choices can decide who gets to use your app.
The internet just pressed the big red debate button. A fiery post says: stop turning plain boxes (called “DIVs”) into fake buttons, and just… use real buttons. Why? Real buttons tell assistive tools—like screen readers for visually impaired people—that they’re clickable, and they work with keyboard keys like Enter and Space. The author even threw meme grenades and name-dropped a React celebrity whose name starts with “R,” plus called out HTMX demos for normalizing the pattern. Drama level: Jurassic Park quote, twice.
The comments lit up. Pro-button folks cheered hard—“Use elements as close to their original intention as possible”—while others asked sharp questions. One skeptic asked if adding “tabindex” (which lets an element be focusable) really messes up the order, and why the author suggested catching keyboard presses at the whole page level. Another commenter wondered if the screen reader warning is even true anymore, hinting that old advice keeps getting repeated. Fans of simplicity backed the post, while practical devs raised eyebrows at the “never do this” tone. Memes of “That’s not how any of this works!” flew, and someone simply asked: Why are we using boxes as buttons at all? The vibe: accessibility meets dev habits, with receipts and sass.
Key Points
- •The article argues against using a div with onclick for interactive controls and advocates using the native button element.
- •HTML button elements have implicit role="button", aiding screen readers and signaling interactivity.
- •Adding role="button" to a div improves semantics but does not provide focusability or keyboard activation.
- •Using tabindex to make a div focusable can disrupt expected focus order and does not add native keyboard behavior.
- •Replicating button behavior on a div requires document-level keydown handling for Enter and Space and focus management, increasing complexity.