lowAccessibility

`role="button"` / `role="link"` Elements Missing `tabindex` or Handler

Elements with role="button" or role="link" lack tabindex and keyboard handler, making them inaccessible to keyboard users.

By Seoxpert Editorial · Published Apr 28, 2026 · Updated May 3, 2026

Why it matters

Elements with ARIA roles like 'button' or 'link' must be keyboard accessible for all users, including those using assistive technology. Failing to provide proper keyboard support breaks accessibility guidelines and can harm user experience and site reputation.

Impact

Keyboard and assistive tech users cannot interact with these elements, reducing accessibility and potentially violating WCAG standards.

How it's detected

Automated crawlers scan for elements with role="button" or role="link" that lack a non-negative tabindex and a keyboard event handler.

Common causes

Using <div> or <span> with role="button" or role="link" without tabindex or keyboard handler
Styling non-interactive elements to look like buttons or links
Overriding native elements with custom ARIA roles but missing keyboard support
Lack of awareness of ARIA keyboard requirements

How to fix it

Prefer using native <button> or <a> elements, which are accessible by default. If you must use a non-interactive element with role="button" or role="link", add tabindex="0" to make it focusable and implement an onkeydown handler to activate the element on Enter or Space key presses. This ensures compliance with accessibility standards.

Code examples

Problem: Missing tabindex and handler

<div role="button">Click me</div>

Fix: Use native button

<button>Click me</button>

Fix: Add tabindex and keyboard handler

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

FAQ

Why isn't using role="button" on a div enough for accessibility?

Because it doesn't make the element focusable or operable by keyboard, which is required for accessibility.

Can I just add tabindex="0" and skip the keyboard handler?

No, you also need a handler so the element responds to Enter and Space keys like a real button.

Is it better to use a native button or a div with role="button"?

Using a native <button> is always better for accessibility and requires less code.

What happens if I leave this issue unfixed?

Keyboard users and assistive technology may not be able to interact with your controls, failing accessibility standards.

Found this issue on your site?

Run a scan to see if `role="button"` / `role="link"` Elements Missing `tabindex` or Handler affects your pages.

Scan my website →