mediumOn-Page SEO

Click Handlers on Non-Interactive Elements (`<div onclick>`)

Non-interactive elements like <div> with onclick handlers are inaccessible to keyboard and assistive tech users.

By Seoxpert Editorial · Published Apr 27, 2026

Why it matters

Using <div> or <span> with onclick handlers makes interactive controls inaccessible to keyboard and screen reader users. This harms usability, excludes users with disabilities, and fails WCAG 2.1 AA accessibility requirements, which can impact SEO and legal compliance.

Impact

Users relying on keyboards or assistive technologies cannot activate these controls, leading to poor accessibility and potential SEO penalties.

How it's detected

The issue is detected by scanning for non-interactive elements (e.g., <div>, <span>) with onclick attributes but lacking role="button".

Common causes

•Using <div> or <span> for clickable elements instead of <button>
•Lack of awareness about accessibility requirements
•Styling needs leading to avoidance of semantic elements
•Copy-pasting code patterns without accessibility review

How to fix it

Replace <div onclick> with a semantic <button type="button"> and style it as needed. If you must use a <div>, add role="button", tabindex="0", an onkeydown handler for Enter/Space, and a visible focus indicator. However, using <button> is the recommended and simplest solution.

Code examples

Problem: Non-interactive element with onclick

<div onclick="doSomething()">Click me</div>

Fix: Use a semantic button

<button type="button" onclick="doSomething()">Click me</button>

Alternative Fix: Accessible div (not recommended)

<div role="button" tabindex="0" onclick="doSomething()" onkeydown="if(event.key==='Enter'||event.key===' '){doSomething();}">Click me</div>

FAQ

Why is using <div onclick> a problem for accessibility?

<div> elements are not focusable or announced as interactive, so keyboard and assistive tech users can't activate them.

Can I just add role="button" to my <div>?

Role="button" helps, but you must also add tabindex="0", keyboard event handlers, and a visible focus indicator for full accessibility.

Is it okay to style a <button> to look like a <div>?

Yes, <button> elements can be styled with CSS to match any design while retaining accessibility.

Does this affect SEO directly?

Indirectly, yes. Poor accessibility can impact user experience signals and compliance, which search engines consider.

Found this issue on your site?

Run a scan to see if Click Handlers on Non-Interactive Elements (`<div onclick>`) affects your pages.

Scan my website →