Agent Wranglers

Accessibility Recommended

Build with native controls

Build controls from native elements (button, a, details, dialog, popover) instead of scripted divs.

How to do it

Swap clickable divs for button or a, and accordions for details. Use dialog for modals and popover for menus.

Example

<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>

How to check

A test finds no div or span with a click handler, for example with a lint rule such as no-static-element-interactions.

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.