---
title: "Build with native controls · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/native-interactive-elements
updated: 2026-10-20
licence: "All rights reserved"
---

# Build with native controls

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Build controls from native elements (`button`, `a`, `details`, `dialog`, `popover`) instead of scripted `div`s.
- How: Swap clickable `div`s for `button` or `a`, and accordions for `details`. Use `dialog` for modals and `popover` for menus.
- Check: A test finds no `div` or `span` with a click handler, for example with a lint rule such as `no-static-element-interactions`.

Example:

```html
<button type="button" popovertarget="menu">Menu</button>
<nav id="menu" popover>…</nav>

<dialog id="confirm">
  <form method="dialog"><p>Delete this?</p><button>Cancel</button><button value="ok">Delete</button></form>
</dialog>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/native-interactive-elements`.

- Previous: [Show the right keyboard on phones](https://agentwranglers.se/playbook/website/accessibility/mobile-form-inputs)
- Next: [Style from the state](https://agentwranglers.se/playbook/website/accessibility/css-state-selectors)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)