# Non-Interactive Element with Keyboard Handler

**NEVER** · **ID:** `interactions-rams-semantic-handlers` · **Category:** interactions
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-rams-semantic-handlers

> NEVER: Use <div onClick> or <span onClick> for interactive elements. Use <button> for actions, <a>/<Link> for navigation. Non-semantic elements lack keyboard support.

Use semantic interactive elements instead of divs with handlers

Rams ships this as a Critical checklist row, not prose. Our reading: bolting role, tabIndex, and onKeyDown onto a div is the expensive way to re-derive what <button> already gives you — focus, Enter/Space activation, and a correct screen-reader announcement. Reach for the semantic element first.

## Bad — do not do this

`interactions-rams-semantic-handlers-bad`

```tsx
import { HugeiconsIcon } from '@hugeicons/react';
import { Delete02Icon, Settings02Icon } from '@hugeicons/core-free-icons';

export function RamsSemanticHandlersBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Non-Semantic Elements</h4>
        <div className="space-y-3">
          <div className="flex gap-3 p-3 bg-muted rounded-lg">
            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
            <div
              onClick={() => {}}
              className="flex items-center gap-2 px-3 py-2 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors cursor-pointer"
            >
              <HugeiconsIcon icon={Delete02Icon} size={16} />
              Delete
            </div>
            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
            <span
              onClick={() => {}}
              className="flex items-center gap-2 px-3 py-2 border border-border rounded-md hover:bg-muted transition-colors cursor-pointer"
            >
              <HugeiconsIcon icon={Settings02Icon} size={16} />
              Settings
            </span>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code className="text-error">{'<div onClick={...}>Delete</div>'}</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-error">
        Divs with onClick lack keyboard support and proper roles
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-rams-semantic-handlers-good`

```tsx
import { HugeiconsIcon } from '@hugeicons/react';
import { Delete02Icon, Settings02Icon } from '@hugeicons/core-free-icons';

export function RamsSemanticHandlersGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Semantic Elements</h4>
        <div className="space-y-3">
          <div className="flex gap-3 p-3 bg-muted rounded-lg">
            <button className="flex items-center gap-2 px-3 py-2 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors">
              <HugeiconsIcon icon={Delete02Icon} size={16} />
              Delete
            </button>
            <a
              href="#settings"
              className="flex items-center gap-2 px-3 py-2 border border-border rounded-md hover:bg-muted transition-colors"
            >
              <HugeiconsIcon icon={Settings02Icon} size={16} />
              Settings
            </a>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code>{'<button>Delete</button>'}</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        Native elements have built-in keyboard support and ARIA roles
      </p>
    </div>
  );
}
```

## References

- [Rams review checklist](https://www.rams.ai/rams.md)
- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)