Clickable element unreachable by keyboard

WCAG 2.1.1, 4.1.2 (A) · EN 301 549 9.2.1.1

There is a <{tag}> with a click handler but no role and no place in the tab order.

Why it matters

A mouse can click anything; a keyboard cannot. A <div> with onclick is invisible to anyone navigating with Tab, with a switch, or by voice control. If that div is "Add to basket", the shop is unusable.

This is the failure that most often leaves a checkout completely blocked.

How to fix it

Use <button>. It handles focus, activation with Enter and Space, and role announcement, all at once and with no extra JavaScript.

<div onclick="addToCart()">Add to basket</div>

<button type="button" onclick="addToCart()">Add to basket</button>

Related

• Image button with no alternative text
• Embedded frame with no title
• Form fields with no label
• Buttons with no name