---
title: "Clickable `<div>`/`<span>` without button semantics (lint/div-button)"
description: "lint/div-button: A `div` with `onClick` is invisible to keyboards and screen readers: it can't be focused with Tab, doesn't fire on Enter/Space and isn't…"
canonical: https://void-design.vercel.app/rules/lint/div-button
lastModified: 2026-09-16
---

# Clickable `<div>`/`<span>` without button semantics

`lint/div-button` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## Why it matters

A `div` with `onClick` is invisible to keyboards and screen readers: it can't be focused with Tab, doesn't fire on Enter/Space and isn't announced as a button.

## How to fix it

Use `<button type="button">` (or `<a href>` for navigation). If you must keep the element, add `role="button"`, `tabIndex={0}` and an `onKeyDown` handler for Enter/Space.

## Example

```tsx
<button type="button" onClick={open} className="…">Open menu</button>
```

## References

- https://www.w3.org/WAI/ARIA/apg/patterns/button/

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `listener-without-cleanup` Event listener or interval added in an effect without cleanup — [lint/listener-without-cleanup](https://void-design.vercel.app/rules/lint/listener-without-cleanup)
- `scroll-listener-nonpassive` `wheel` / `touchstart` / `touchmove` listener without `{ passive: true }` — [lint/scroll-listener-nonpassive](https://void-design.vercel.app/rules/lint/scroll-listener-nonpassive)
- `unload-listener` `unload` event listener — [lint/unload-listener](https://void-design.vercel.app/rules/lint/unload-listener)
- `useeffect-fetch` Page fetches its data in `useEffect` — [lint/useeffect-fetch](https://void-design.vercel.app/rules/lint/useeffect-fetch)
- `dangerously-set-jsonld-unescaped` JSON-LD injected with `JSON.stringify` without escaping `<` — [lint/dangerously-set-jsonld-unescaped](https://void-design.vercel.app/rules/lint/dangerously-set-jsonld-unescaped)
- `transition-all` `transition: all` / `transition-all` — [lint/transition-all](https://void-design.vercel.app/rules/lint/transition-all)
- `animate-layout-prop` Animation of layout properties (width/height/top/left/margin/padding) — [lint/animate-layout-prop](https://void-design.vercel.app/rules/lint/animate-layout-prop)
- `outline-none-no-replacement` Focus outline removed without a visible replacement — [lint/outline-none-no-replacement](https://void-design.vercel.app/rules/lint/outline-none-no-replacement)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/div-button`