🚫 Divs Are Not Buttons , Here’s Why (and How to Fix It)

Have you ever used a <div> to make something clickable?

Something like this:

<div onclick="alert('hello')">Click me!</div>

It works… right?

Well, not really , at least not for everyone.

Let’s break down why <div> elements should not be used as buttons, what accessibility problems they cause, and how to fix them the right way.

⚠ Why Using <div> as a Button Is a Problem

When you use a plain <div> with an onclick, it might look and work for you with a mouse click , but it fails for:

🔹 Keyboard users (they can’t “tab” to it)

🔹 Screen readers (they don’t know it’s clickable)

🔹 Accessibility tools (they can’t understand its purpose)

So while you might think it’s fine, your users who rely on accessibility features will be left behind.

🧩 Step-by-Step: Making a Div Accessible

If you absolutely must use a <div> as a button (for design or framework limitations),
here’s how to make it accessible step by step.

1. Tell screen readers it’s clickable

Add a role attribute:

<div role="button" onclick="alert('hello')">Click me!</div>

This helps assistive technologies recognize it as an interactive element.

2. Allow users to tab to it

Add a tabindex="0" to make it keyboard-focusable:

<div tabindex="0" role="button" onclick="alert('hello')">Click me!</div>

Now users can navigate to it with the Tab key.

3. Allow keyboard interaction

Enable triggering with the Enter or Space key:

<div
  tabindex="0"
  role="button"
  onclick="alert('hello')"
  onkeyup="alert('hello')"
>
  Click me!
</div>

This lets keyboard users activate it just like a real button.

4. Tell screen readers what it does

Add an ARIA label to describe its function:

<div
  aria-label="Alert the word hello"
  tabindex="0"
  role="button"
  onclick="alert('hello')"
  onkeyup="alert('hello')"
>
  Click me!
</div>

This way, assistive tools can clearly explain its purpose.

✅ The Best Solution: Just Use a

All of that accessibility work can be avoided by using the right HTML element from the start:

<button onclick="alert('hello')">Click me!</button>

It’s:

1. Accessible by default
2. Keyboard and screen-reader friendly
3. Simpler and cleaner

Moral of the story:

If it behaves like a button, it should be a .

🧭 Key Takeaways

✅ Always use semantic HTML (<button>, <a>, etc.)

⚙ Add role, tabindex, and aria - only if you must

♿ Accessibility isn’t optional - it’s essential

💡 Clean, semantic code helps everyone (including SEO!)

If you found this helpful, share it with other developers who might be doing the same mistake.

✍ Final Thought

Great front-end developers don’t just make things look good ,
they make them usable for everyone.
Start today by replacing that <div> button. 🚀